@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-wrapper() { ... }@mixin field-wrapper() { 
  position: relative;
 }

@mixin field-control($block) { ... }@mixin field-control($block) { 
  padding-left: spacing.get('s4');
  padding-right: spacing.get('s4');
  position: relative;
  display: block;
  width: 100%;
  height: settings.$height;
  appearance: none;
  background: transparent;
  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 {
    opacity: 0.5;
    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
  &[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;
  }
 }

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

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

  #{$control}:disabled ~ & {
    opacity: 0.5;
  }

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

  #{$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;
  }

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

  #{$block}--populated #{$control} ~ &,
  #{$block}:not(#{$block}--processed) #{$control} ~ & {
    border-top-color: transparent;
  }

  @if $float-on-focus {
    #{$control}:focus ~ &,
    #{$block}--populated #{$control}:hover ~ & {
      border-top-color: transparent;
    }
  }
 }

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

@mixin field-label($block, $float-on-focus) { ... }@mixin field-label($block, $float-on-focus) { 
  @include typography.style-as('caption');

  position: absolute;
  top: calc(#{spacing.get('s2')} * -1);
  left: 0;
  display: flex;
  width: 100%;
  color: settings.$label-text-color;
  pointer-events: none;
  transition-property: font-size, line-height;
  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) #{$block}__control:focus ~ & {
    color: settings.$border-color-emphasis;
  }

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

    line-height: settings.$label-height;
  }

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

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

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

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

  #{$block}__control:disabled ~ & {
    opacity: 0.5;
  }

  &::after,
  &::before {
    display: block;
    margin-top: spacing.get('s2');
    border-top: unit.rem(1px) solid settings.$border-color;
    min-width: kib-core-dimensions-get('small') + kib-core-dimensions-get('tiny');
    height: kib-core-dimensions-get('small');
    pointer-events: none;
    box-shadow: inset 0 unit.rem(1px) transparent;
    content: '';

    #{$block}--processed & {
      border-top-color: transparent;
    }

    #{$block}--populated & {
      border-top-color: settings.$border-color;
    }

    #{$block}--populated#{$block}--invalid & {
      border-top-color: currentColor;
    }

    #{$block}--populated:not(#{$block}--invalid) #{$block}__control:hover ~ & {
      border-top-color: settings.$border-color-emphasis;
    }

    #{$block}__control:focus ~ & {
      border-top-color: currentColor;
      box-shadow: inset 0 unit.rem(1px) currentColor;
    }
  }

  &::before {
    margin-right: spacing.get('s1');
    border-left: unit.rem(1px) solid transparent;
    border-radius: settings.$radius 0 0 0;
  }

  &::after {
    flex-grow: 1;
    margin-left: spacing.get('s1');
    border-right: unit.rem(1px) solid transparent;
    border-radius: 0 settings.$radius 0 0;
  }
 }

@mixin field-label-content() { ... }@mixin field-label-content() { 
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 }

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

  #{$block}__control:disabled ~ & {
    opacity: 0.5;
  }

  :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('ui-bg', '06') !default;

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

$border-color-danger: color.get('text', 'error') !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: $height + kib-core-dimensions-get('default') !default;

$label-height-condensed: $height-condensed + kib-core-dimensions-get('default') !default;

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