@mixin root-container() { ... }@mixin root-container() { 
  display: flex;
  flex-direction: column;
  margin-bottom: spacing.get('s2');
 }

@mixin root-container-with-border() { ... }@mixin root-container-with-border() { 
  border-radius: settings.$control-border-radius;
  box-shadow: 0 0 0
      var(--_kib-field-control-has-content-border-width, #{settings.$control-border-width})
      var(--_kib-field-control-has-content-border-color, #{settings.$control-border-color}),
    0 0 0 var(--_kib-field-control-has-content-outline-width, #{settings.$control-outline-width})
      var(--_kib-field-control-has-content-outline-color, #{settings.$control-outline-color});
  outline: settings.$control-border-width solid transparent; // high contrast mode only
  color: settings.$control-text-color;
  transition: box-shadow settings.$control-transition-duration ease-out;
 }

@mixin root-container-with-border-focus() { ... }@mixin root-container-with-border-focus() { 
  --_kib-field-control-border-color: #{settings.$control-border-color-focus};
  --_kib-field-control-border-width: #{settings.$control-border-width-large};
  --_kib-field-control-outline-width: #{calc(
      #{border.get('ct', 'field', 'border-width', 'halo')} + #{border.get(
          'ct',
          'field',
          'border-width',
          'interaction'
        )}
    )};

  // high contrast mode only
  outline-width: settings.$control-outline-width;
 }

@mixin root-container-disabled() { ... }@mixin root-container-disabled() { 
  opacity: 0.5;

  @media (forced-colors: active) {
    opacity: 1;
  }
 }

@mixin label() { ... }@mixin label() { 
  @include typography.style-as('form-label');

  order: 1;
  color: settings.$label-text-color;
 }

@mixin label-disabled() { ... }@mixin label-disabled() { 
  pointer-events: none;
 }

@mixin label-hidden() { ... }@mixin label-hidden() { 
  @include a11y.visually-hidden;
 }

@mixin label-required() { ... }@mixin label-required() { 
  color: settings.$control-error-text-color;
 }

@mixin field() { ... }@mixin field() { 
  position: relative;

  /* margin: Box shadow is used to mimic input field border to prevent layout shift.
  Need that width at bottom to prevent box shadow overlapping the error/help msg */
  margin: calc(settings.$control-border-width + spacing.get('s1')) settings.$control-border-width
    settings.$control-border-width-large;
  order: 3;
  color: var(--_kib-field-control-text-color, #{settings.$control-text-color});
 }

@mixin control() { ... }@mixin control() { 
  @include typography.style-as(settings.$field-control-typography);

  position: relative;
  padding: settings.$control-padding;
  width: 100%;
  appearance: none;
  background-color: var(
    --_kib-field-control-background-color,
    #{settings.$control-background-color}
  );
  border: 0;
  border-radius: settings.$control-border-radius;
  box-shadow: 0 0 0 var(--_kib-field-control-border-width, #{settings.$control-border-width})
      var(--_kib-field-control-border-color, #{settings.$control-border-color}),
    0 0 0
      var(
        --_kib-field-control-outline-width,
        calc(#{settings.$control-outline-width} + #{settings.$control-border-width})
      )
      var(--_kib-field-control-outline-color, #{settings.$control-outline-color});
  outline: settings.$control-border-width solid transparent; // high contrast mode only
  color: settings.$control-text-color;
  transition: box-shadow settings.$control-transition-duration ease-out;
  overflow: hidden;
  text-overflow: ellipsis;

  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }
 }

@mixin control-without-border() { ... }@mixin control-without-border() { 
  --_kib-field-control-border-color: transparent;
  --_kib-field-control-border-width: 0;
  --_kib-field-control-outline-width: 0;
 }

@mixin control-with-action-label() { ... }@mixin control-with-action-label() { 
  padding-right: settings.$control-with-action-label-padding;
 }

@mixin control-on-hover() { ... }@mixin control-on-hover() { 
  @include control-state('hover');
 }

@mixin control-state($state, $variant) { ... }@mixin control-state($state, $variant) { 
  $prefix: if(
    $variant == 'has-content',
    '--_kib-field-control-has-content',
    '--_kib-field-control'
  );

  #{$prefix}-border-color: #{color.get('ct', 'field', 'input', $state, 'border-color')};
  #{$prefix}-border-width: #{settings.$control-border-width-large};
  #{$prefix}-outline-color: #{color.get('ct', 'field', 'input', $state, 'halo-color')};
  #{$prefix}-background-color: #{color.get('ct', 'field', 'input', $state, 'bg-color')};
  #{$prefix}-outline-width: #{calc(
      #{border.get('ct', 'field', 'border-width', 'halo')} + #{border.get(
          'ct',
          'field',
          'border-width',
          'interaction'
        )}
    )};

  // high contrast mode only
  @if $state == 'focus' {
    outline-width: settings.$control-outline-width;
  }

  @if $state == 'error' {
    #{$prefix}-outline-color: #{color.get('ct', 'field', 'input', 'active', 'halo-color')};
  }
 }

@mixin control-state-error-focus-halo() { ... }@mixin control-state-error-focus-halo() { 
  $prefix: if(
    $variant == 'has-content',
    '--_kib-field-control-has-content',
    '--_kib-field-control'
  );
  #{$prefix}-outline-color: #{color.get('ct', 'field', 'input', 'error', 'halo-color')};
 }

@mixin control-state-error-forced-colors() { ... }@mixin control-state-error-forced-colors() { 
  outline-style: dashed;
 }

@mixin control-on-focus() { ... }@mixin control-on-focus() { 
  @include control-state('focus');
 }

@mixin control-on-pressed() { ... }@mixin control-on-pressed() { 
  @include control-state('focus');
 }

@mixin control-on-invalid() { ... }@mixin control-on-invalid() { 
  @include control-state('error');
 }

@mixin control-has-content-on-focus() { ... }@mixin control-has-content-on-focus() { 
  @include control-state('focus', 'has-content');
 }

@mixin control-has-content-on-pressed() { ... }@mixin control-has-content-on-pressed() { 
  @include control-state('focus', 'has-content');
 }

@mixin control-has-content-on-hover() { ... }@mixin control-has-content-on-hover() { 
  @include control-state('hover', 'has-content');
 }

@mixin control-disabled() { ... }@mixin control-disabled() { 
  pointer-events: none;
 }

@mixin control-read-only() { ... }@mixin control-read-only() { 
  --_kib-field-control-background-color: #{color.get(
      'ct',
      'field',
      'input',
      'read-only',
      'bg-color'
    )};
 }

@mixin control-placeholder() { ... }@mixin control-placeholder() { 
  @include typography.style-as('utility-4');
  color: settings.$placeholder-text-color;
 }

@mixin control-autofill() { ... }@mixin control-autofill() { 
  --_kib-field-control-background-color: #{settings.$control-background-color-autofill};
  -webkit-text-fill-color: settings.$control-text-color;
 }

@mixin clear-control-with-icon() { ... }@mixin clear-control-with-icon() { 
  --_kib-field-clear-offset: calc(#{settings.$icon-size} + #{settings.$clear-icon-offset});
 }

@mixin help() { ... }@mixin help() { 
  @include typography.style-as('form-helper');

  order: 2;
  color: settings.$help-text-color;
 }

@mixin help-bottom() { ... }@mixin help-bottom() { 
  order: 4;
 }

@mixin icon-positioned-with-control-content() { ... }@mixin icon-positioned-with-control-content() { 
  bottom: calc((#{settings.$input-field-line-height} + #{settings.$control-padding} * 2) / 2);
  top: inherit;
  transform: translateY(50%);
 }

@mixin clear-icon() { ... }@mixin clear-icon() { 
  width: settings.$clear-icon-size;
  height: settings.$clear-icon-size;
  color: settings.$clear-icon-color;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;

  @media (forced-colors: active) {
    color: inherit;
  }
 }

@mixin clear-control-hidden() { ... }@mixin clear-control-hidden() { 
  display: none;
 }

@mixin icon() { ... }@mixin icon() { 
  display: block;
  position: absolute;
  width: settings.$icon-size;
  height: settings.$icon-size;
  top: 50%;
  right: settings.$control-padding;
  z-index: 1;
  transform: translateY(-50%);
  transition: color settings.$control-transition-duration ease-out;
  pointer-events: none;
  color: color.get('ct', 'field', 'appended-button', 'action', 'active', 'icon-color');
 }

@mixin icon-with-control-content() { ... }@mixin icon-with-control-content() { 
  @include icon-positioned-with-control-content;
 }

@mixin icon-on-state($variant: action, $state) { ... }@mixin icon-on-state($variant: action, $state) { 
  color: color.get('ct', 'field', 'appended-button', $variant, $state, 'icon-color');
 }

@mixin icon-with-action-states($variant: action, $state) { ... }@mixin icon-with-action-states($variant: action, $state) { 
  & svg {
    color: color.get('ct', 'field', 'appended-button', $variant, $state, 'icon-color');
  }

  &::after {
    border-color: color.get('ct', 'field', 'appended-button', $variant, $state, 'divider-color');
  }
 }

@mixin icon-action-state($state, $variant: action) { ... }@mixin icon-action-state($state, $variant: action) { 
  @include icon-on-state($variant, $state);
  @include icon-with-action-states($state, $variant);
 }

@mixin loading-spinner() { ... }@mixin loading-spinner() { 
  width: settings.$icon-size;
  height: settings.$icon-size;
  vertical-align: inherit;
 }

@mixin action-area-divider-styles() { ... }@mixin action-area-divider-styles() { 
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: settings.$icon-size;
  border-left: var(
      --_kib-field-divider-border-width,
      #{border.get('ct', 'field', 'border-width', 'standard')}
    )
    solid color.get('ct', 'field', 'appended-button', $variant, 'active', 'divider-color');
  pointer-events: none;
 }

@mixin action-area-divider() { ... }@mixin action-area-divider() { 
  &::after {
    @include action-area-divider-styles($variant);
  }
 }

@mixin action-area-divider-color() { ... }@mixin action-area-divider-color() { 
  border-color: color.get('ct', 'field', 'appended-button', $variant, $state, 'divider-color');
 }

@mixin action-wrapper() { ... }@mixin action-wrapper() { 
  @include action-area-layout;
  @include action-area-divider($variant);

  & button {
    @include action($variant);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      &::after {
        @include action-area-divider-color($variant, hover);
      }
    }
  }

  // Divider color: focus only when button has focus-visible (keyboard), not after click — matches action label
  /* stylelint-disable-next-line plugin/use-baseline -- :has() required so focus divider color applies only on focus-visible */
  &:has(button:focus-visible)::after {
    @include action-area-divider-color($variant, focus);
  }

  /* stylelint-disable-next-line plugin/use-baseline -- :has() required for pressed divider color from child button state */
  &:has(button:active)::after {
    @include action-area-divider-color($variant, pressed);
  }
 }

@mixin action-label-divider-control-state-styles() { ... }@mixin action-label-divider-control-state-styles() { 
  border-left-color: color.get('ct', 'field', 'appended-button', $variant, $state, 'divider-color');
 }

@mixin action-label-divider-color() { ... }@mixin action-label-divider-color() { 
  border-color: color.get('ct', 'field', 'appended-button', $variant, $state, 'divider-color');
 }

@mixin action-label-control-states() { ... }@mixin action-label-control-states() { 
  $b: if($block != null, $block, '&');
  $p: if($when-invalid, '#{$b}--invalid ', '');

  @media (hover: hover) and (pointer: fine) {
    #{$p}#{$b}__control:hover ~ & .kib-field__action-label__button {
      @include action-label-control-state-full($variant, hover);
    }

    #{$p}#{$b}__control:hover ~ & {
      &::after {
        @include action-label-divider-control-state-styles($variant, hover);
      }
    }

    #{$p}#{$b}__control:active ~ & .kib-field__action-label__button {
      @include action-label-control-state-full($variant, pressed);
    }

    #{$p}#{$b}__control:active ~ & {
      &::after {
        @include action-label-divider-control-state-styles($variant, pressed);
      }
    }
  }
 }

@mixin action-label-read-only-styles() { ... }@mixin action-label-read-only-styles() { 
  background-color: settings.$control-background-color-read-only;
 }

@mixin error() { ... }@mixin error() { 
  order: 5;
 }

@mixin error-message() { ... }@mixin error-message() { 
  @include typography.style-as(settings.$error-message-token-size);

  display: flex;
  align-items: flex-start;
  margin-top: spacing.get('s1');
  color: settings.$control-error-text-color;
 }

@mixin error-icon() { ... }@mixin error-icon() { 
  display: block;
  flex-shrink: 0;
  margin-right: spacing.get('s1');
  width: settings.$error-icon-size;
  height: settings.$error-icon-size;
  color: color.get('ct', 'field', 'input', 'error', 'adornment-color');
 }

@mixin error-state-with-icons($state) { ... }@mixin error-state-with-icons($state) { 
  @include control-on-invalid;

  ~ .kib-field__icon {
    @include icon-on-state(error, $state);
  }

  ~ .kib-field__action {
    @include icon-action-state($state, error);
  }
 }

@mixin action-area-divider-interaction-border-width() { ... }@mixin action-area-divider-interaction-border-width() { 
  --_kib-field-divider-border-width: #{border.get('ct', 'field', 'border-width', 'interaction')};
 }

$control-background-color: color.get('ct', 'field', 'input', 'active', 'bg-color') !default;

$control-background-color-read-only: color.get(
  'ct',
  'field',
  'input',
  'read-only',
  'bg-color'
) !default;

$control-background-color-autofill: color.get(
  'ct',
  'field',
  'input',
  'autofill',
  'bg-color'
) !default;

$control-text-color: color.get('ct', 'field', 'text', 'text-input-color') !default;

$control-border-color: color.get('ct', 'field', 'input', 'active', 'border-color') !default;

$control-border-color-focus: color.get('ct', 'field', 'input', 'focus', 'border-color') !default;

$control-border-color-error: color.get('ct', 'field', 'input', 'error', 'border-color') !default;

$control-border-radius: border.get('ct', 'field', 'border-radius', 'standard') !default;

$control-border-width: border.get('ct', 'field', 'border-width', 'standard') !default;

$control-border-width-large: border.get('ct', 'field', 'border-width', 'interaction') !default;

$control-outline-color: color.get('ct', 'field', 'input', 'active', 'halo-color') !default;

$control-outline-width: border.get('ct', 'field', 'border-width', 'halo') !default;

$control-transition-duration: 0.2s !default;

$control-padding: spacing.get('s3') !default;

$field-control-typography: 'utility-4' !default;

$label-text-color: color.get('ct', 'field', 'text', 'text-label-color') !default;

$help-text-color: color.get('ct', 'field', 'text', 'text-help-color') !default;

$clear-control-size: unit.rem(14px) !default;

$clear-control-background-color: color.get('text', 'tertiary') !default;

$clear-control-hover-color: color.get('action', 'utility', 'primary', '03') !default;

$clear-icon-size: unit.rem(12px) !default;

$icon-size: $input-field-line-height;

$action-height: calc($input-field-line-height + spacing.get('s3') * 2) !default;

$clear-icon-offset: calc(#{$control-padding} + #{spacing.get('s2')}) !default;

$clear-icon-color: color.get('field', 'primary') !default;

$placeholder-text-color: color.get('text', 'tertiary') !default;

$control-with-icon-padding: calc(
  #{$icon-size} + #{$clear-icon-offset} + #{spacing.get('s2')}
) !default;

$control-with-action-label-padding: calc(#{spacing.get('s4')} * 2 + 10ch) !default;

$control-error-text-color: color.get('ct', 'field', 'text', 'text-error-color') !default;

$control-read-only-text-color: color.get('ct', 'field', 'text', 'text-input-color') !default;

$error-message-token-size: 'form-error' !default;

$error-icon-size: unit.em(14.5px) !default;

$action-right-spacing: unit.rem(10px) !default;

$icon-size: $input-field-line-height;