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

@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: color.get('text', 'error');
 }

@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, 0)
      var(--kib-field-control-outline-color, #{settings.$control-outline-color}),
    0 0 0 var(--kib-field-control-autofill-inset, 0) settings.$control-background-color-autofill
      inset;
  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-on-hover() { ... }@mixin control-on-hover() { 
  --kib-field-control-border-width: #{settings.$control-border-width-large};

  // high contrast mode only
  &:not(:focus) {
    outline-width: settings.$control-border-width-large;
  }
 }

@mixin control-on-focus() { ... }@mixin control-on-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: #{settings.$control-outline-width};

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

@mixin control-on-invalid() { ... }@mixin control-on-invalid() { 
  --kib-field-control-border-color: #{settings.$control-border-color-error};
  --kib-field-control-border-width: #{settings.$control-border-width-large};

  @media (forced-colors: active) {
    outline-style: dashed;
  }
 }

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

@mixin control-read-only() { ... }@mixin control-read-only() { 
  --kib-field-control-text-color: #{settings.$control-read-only-text-color};
  --kib-field-control-background-color: #{settings.$control-background-color-read-only};
 }

@mixin control-placeholder() { ... }@mixin control-placeholder() { 
  color: settings.$placeholder-text-color;
 }

@mixin control-autofill() { ... }@mixin control-autofill() { 
  --kib-field-control-autofill-inset: #{unit.rem(1000px)};

  -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 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;
 }

@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;
 }

@mixin icon-on-focus() { ... }@mixin icon-on-focus() { 
  color: settings.$control-border-color-focus;
 }

@mixin icon-with-action() { ... }@mixin icon-with-action() { 
  &::after {
    content: '';
    border-left: 1px solid settings.$icon-with-action-color;
    right: spacing.get('s2');
    position: absolute;
    width: settings.$icon-size;
    height: settings.$icon-size;
    pointer-events: none;
  }
 }

@mixin icon-with-action-on-focus() { ... }@mixin icon-with-action-on-focus() { 
  & svg {
    color: settings.$icon-with-action-focus-color;
  }

  &::after {
    border-color: settings.$icon-with-action-focus-color;
  }
 }

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

@mixin action-wrapper() { ... }@mixin action-wrapper() { 
  @include icon;
  @include icon-with-action;

  display: flex;
  justify-content: center;
  align-items: center;

  &::after {
    top: 50%;
    transform: translateY(-50%);
  }

  // should apply styles to the first button within
  // the action wrapper
  & button:first-child {
    @include action;
  }

  &:hover {
    &::after {
      border-color: color.get('field', '04');
    }
  }
 }

@mixin action() { ... }@mixin action() { 
  @include kib-button-new.generate-styles('utility', 'secondary', 'medium', true);

  pointer-events: initial;
  box-shadow: none;
  border-radius: 0 border.get('br02') border.get('br02') 0;
  opacity: inherit;
  width: settings.$action-height;
  height: settings.$action-height;
  min-height: settings.$action-height;
  min-width: settings.$action-height;

  & svg {
    width: settings.$icon-size;
    height: settings.$icon-size;
    color: settings.$icon-with-action-color;

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

  &:focus {
    background-color: color.get('action', 'utility', 'alternate', '03');
  }

  &:active {
    background-color: color.get('action', 'utility', 'alternate', '02');
  }

  &::after {
    border: none;
  }

  &:disabled {
    opacity: 0.5;
    pointer-events: none;
    @media (forced-colors: active) {
      opacity: 1;
    }
  }

  &:hover {
    background-color: color.get('field', '08');

    & svg {
      color: color.get('field', '04');
    }

    &::after {
      border-color: color.get('field', '04');
    }
  }
 }

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

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

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

@mixin error-icon() { ... }@mixin error-icon() { 
  margin-right: spacing.get('s1');
  width: settings.$error-icon-size;
  height: settings.$error-icon-size;
  color: currentColor;
 }

$control-background-color: color.get('field', 'primary') !default;

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

$control-background-color-autofill: color.get('field', '03');

$control-text-color: color.get('text', 'primary') !default;

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

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

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

$control-border-radius: border.get('br02') !default;

$control-border-width: unit.rem(1px) !default;

$control-border-width-large: unit.rem(2px) !default;

$control-outline-color: color.get('field', '08') !default;

$control-outline-width: unit.rem(6px) !default;

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

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

$field-control-typography: 'form-text' !default;

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

$help-text-color: color.get('text', 'secondary') !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;

$icon-with-action-color: color.get('text', 'primary') !default;

$icon-with-action-focus-color: color.get('field', '04') !default;

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

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

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

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

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

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

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