@mixin field-root-container() { ... }@mixin field-root-container() { 
  @include typography.style-as('paragraph-1');

  margin-bottom: spacing.get('s4');
  padding-top: spacing.get('s2');
  display: block;
  width: 100%;
 }

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

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

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

@mixin field-control($block) { ... }@mixin field-control($block) { 
  $control: #{$block}__control;

  padding-left: spacing.get('s4');
  padding-right: spacing.get('s4');
  position: relative;
  display: block;
  width: 100%;
  height: settings.$height;
  appearance: none;
  background-color: color.get('field', 'primary');
  border: 0;
  border-radius: settings.$radius;
  box-shadow: none;
  color: settings.$text-color;
  font: inherit;

  #{$block}--condensed & {
    height: settings.$height-condensed;
  }

  &::placeholder {
    color: transparent;
  }

  &:focus {
    color: settings.$text-color-emphasis;
    outline: 0;

    &::placeholder {
      color: settings.$label-text-color;
    }
  }

  &:disabled {
    pointer-events: none;
  }

  &[readonly] {
    background-color: settings.$background-color-read-only;
  }

  #{$block}--invalid & {
    color: settings.$text-color-emphasis;
  }

  #{$block}--has-icon & {
    padding-right: spacing.get('s9');
  }

  /**
   * Fake vertical alignment of an input if it's not actually an input
   * and apply dark mode manually because it doesn't happen automatically.
   */
  &[contenteditable] {
    padding-top: calc(#{spacing.get('s4')} - #{unit.rem(1px)});
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  // Remove 'clear' button on IE
  &::-ms-clear {
    display: none;
    height: 0;
    width: 0;
  }

  // Remove arrow on IE
  &::-ms-expand {
    display: none;
  }

  // Remove background highlight on IE
  &::-ms-value {
    background: none;
    color: settings.$text-color;
  }

  &:-webkit-autofill {
    -webkit-text-fill-color: settings.$text-color-emphasis;
    box-shadow: 0 0 0 unit.rem(1000px) settings.$background-color-autofill inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  /**
   * - add consistency in placeholder text casing for date types
   * - fixes vertical alignment of placeholder because of lack of vertical padding
   */
  &:is([type='color'], [type='date'], [type='time'], [type='week'], [type='month'], [type='datetime-local']) {
    padding-top: spacing.get('s4');
    padding-bottom: spacing.get('s4');
    text-transform: uppercase;
  }
 }

@mixin field-outline($block, $float-on-focus) { ... }@mixin field-outline($block, $float-on-focus) { 
  $control: #{$block}__control;

  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: unit.rem(1px) solid settings.$border-color;
  border-radius: settings.$radius;
  pointer-events: none;

  #{$control}:hover ~ &,
  #{$control}:focus ~ & {
    border-color: settings.$border-color-emphasis;
  }

  #{$control}:focus ~ & {
    box-shadow: inset unit.rem(1px) 0 settings.$border-color-emphasis,
      inset unit.rem(-1px) 0 settings.$border-color-emphasis,
      inset 0 unit.rem(-1px) settings.$border-color-emphasis,
      inset 0 unit.rem(1px) settings.$border-color-emphasis;

    @media (forced-colors: active) {
      border-width: unit.rem(2px);
    }

    @if not($float-on-focus) {
      #{$block}:not(#{$block}--populated) & {
        box-shadow: inset 0 0 0 1px settings.$border-color-emphasis;
      }
    }
  }

  #{$block}--invalid #{$control} ~ & {
    border-color: settings.$border-color-danger;

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

  #{$block}--invalid #{$control}:focus ~ & {
    box-shadow: inset unit.rem(1px) 0 settings.$border-color-danger,
      inset unit.rem(-1px) 0 settings.$border-color-danger,
      inset 0 unit.rem(-1px) settings.$border-color-danger,
      inset 0 unit.rem(1px) settings.$border-color-danger;
  }

  #{$control}:disabled ~ &,
  #{$block}--disabled #{$control} ~ & {
    @media (forced-colors: active) {
      border-color: GrayText;
    }
  }

  @if not($float-on-focus) {
    #{$block}--invalid:not(#{$block}--populated) #{$control}:focus ~ & {
      box-shadow: inset 0 0 0 unit.rem(1px) settings.$border-color-danger;
    }
  }
 }

@mixin field-icon() { ... }@mixin field-icon() { 
  position: absolute;
  top: 50%;
  right: spacing.get('s4');
  display: block;
  width: settings.$icon-size;
  height: settings.$icon-size;
  color: settings.$icon-color;
  transform: translateY(-50%);
  pointer-events: none;

  :disabled ~ & {
    @media (forced-colors: active) {
      color: GrayText;
    }
  }
 }

@mixin field-label($block, $float-on-focus) { ... }@mixin field-label($block, $float-on-focus) { 
  $control: #{$block}__control;

  @include typography.style-as('caption');

  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  color: settings.$label-text-color;
  pointer-events: none;
  transform: translateY(-50%);
  transition-property: font-size, transform, top;
  transition-duration: 0.2s;

  // Transition is faster in Safari
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      transition-duration: 50ms;
    }
  }

  // Remove animation if requested
  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }

  #{$block}:not(#{$block}--invalid) #{$control}:focus ~ & {
    color: settings.$border-color-emphasis;
  }

  #{$block}--processed & {
    @include typography.style-as('paragraph-1');

    top: 50%;
    transform: translateY(-50%);
  }

  // Increased specificity b/c of condensed
  #{$block}--processed#{$block}--populated & {
    @include typography.style-as('caption');

    top: 0;
    transform: translateY(-50%);
  }

  @if $float-on-focus {
    #{$control}:focus ~ & {
      @include typography.style-as('caption');

      top: 0;
      transform: translateY(-50%);
    }
  }

  #{$block}--invalid & {
    color: settings.$text-color-danger;
  }

  #{$control}:disabled ~ &,
  #{$block}--disabled #{$control} ~ & {
    @media (forced-colors: active) {
      color: GrayText;
    }
  }
 }

@mixin field-label-content() { ... }@mixin field-label-content() { 
  margin-inline-start: spacing.get('s3');
  padding-inline: spacing.get('s1');
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: color.get('field', 'primary');
 }

@mixin field-messages-container($block) { ... }@mixin field-messages-container($block) { 
  @include typography.style-as('caption');

  padding-left: spacing.get('s4');
  padding-right: spacing.get('s4');
  color: settings.$help-text-color;

  :last-child {
    margin-bottom: 0;
  }
 }

@mixin field-messages-common() { ... }@mixin field-messages-common() { 
  margin-top: spacing.get('s2');
  margin-bottom: spacing.get('s2');
 }

@mixin field-messages-error() { ... }@mixin field-messages-error() { 
  color: settings.$text-color-danger;
 }

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

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

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

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

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

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

$text-color-emphasis: $text-color !default;

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

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

$icon-size: kib-core-dimensions-get('large') !default;

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

$radius: kib-core-dimensions-get('small') !default;

$height: unit.rem(56px) !default;

$height-condensed: unit.rem(40px) !default;

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

$label-font-size: typography.get('paragraph-1', 'font-size') !default;

$label-font-size-emphasis: typography.get('caption', 'font-size') !default;

$label-height: calc(#{$height} + #{spacing.get('s4')}) !default;

$label-height-condensed: calc(#{$height-condensed} + #{spacing.get('s4')}) !default;

$label-height-emphasis: typography.get('caption', 'line-height') !default;