@mixin root-container() { ... }@mixin root-container() { 
  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, #{$kib-fields-control-computed-border-width})
      var(--_kib-field-control-outline-color, #{settings.$control-outline-color});

  outline: settings.$control-border-width solid transparent; // high contrast mode only
  border-radius: unit.rem(8px);
  height: unit.rem(40px);
  min-width: unit.rem(140px);
  background-color: var(
    --_kib-quantity-selector-background-color,
    #{color.get('ct', 'field', 'input', 'active', 'bg-color')}
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: spacing.get('s2');

  &:hover {
    @include control-on-hover;
  }

  &:focus-within,
  &:active {
    @include control-on-focus;
  }
 }

@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-color: #{color.get('ct', 'field', 'input', 'focus', 'halo-color')};
  --_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 control-on-hover() { ... }@mixin control-on-hover() { 
  --_kib-field-control-border-width: #{settings.$control-border-width-large};
  --_kib-field-control-border-color: #{color.get('ct', 'field', 'input', 'hover', 'border-color')};

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

@mixin error-state-control-on-focus() { ... }@mixin error-state-control-on-focus() { 
  --_kib-field-control-border-color: #{color.get('ct', 'field', 'input', 'error', 'border-color')};
  --_kib-field-control-border-width: #{settings.$control-border-width-large};
  --_kib-field-control-outline-color: #{color.get('ct', 'field', 'input', 'error', 'halo-color')};
  --_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;

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

@mixin error-state-control-on-hover() { ... }@mixin error-state-control-on-hover() { 
  --_kib-field-control-border-width: #{settings.$control-border-width-large};
  --_kib-field-control-border-color: #{color.get('ct', 'field', 'input', 'error', 'border-color')};

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

@mixin icon-container() { ... }@mixin icon-container() { 
  /* Note: These values will be removed
  * when refactored to use KibFields
  */
  background-color: var(
    --_kib-quantity-selector-icon-container-background-color,
    #{color.get('ct', 'field', 'input', 'active', 'bg-color')}
  );
  transition: 0.4s;
  height: 100%;
  flex: 0 0 unit.rem(35px);
  padding: unit.rem(7px);
  user-select: none;
  z-index: 2;
  cursor: pointer;
  color: var(
    --_kib-quantity-selector-icon-color,
    #{color.get('ct', 'field', 'appended-button', 'action', 'active', 'icon-color')}
  );

  &:focus {
    outline: none;
  }

  &:hover {
    --_kib-quantity-selector-icon-container-background-color: #{color.get(
        'ct',
        'field',
        'appended-button',
        'action',
        'hover',
        'bg-color'
      )};

    --_kib-field-control-border-width: #{settings.$default-border-width};
    --_kib-quantity-selector-icon-color: #{color.get(
        'ct',
        'field',
        'appended-button',
        'action',
        'hover',
        'icon-color'
      )};
  }

  &:active {
    --_kib-quantity-selector-icon-container-background-color: #{color.get(
        'ct',
        'field',
        'appended-button',
        'action',
        'pressed',
        'bg-color'
      )};
    --_kib-quantity-selector-icon-color: #{color.get(
        'ct',
        'field',
        'appended-button',
        'action',
        'pressed',
        'icon-color'
      )};
  }
 }

@mixin icon-container-error-state() { ... }@mixin icon-container-error-state() { 
  color: var(
    --_kib-quantity-selector-icon-color,
    #{color.get('ct', 'field', 'appended-button', 'error', 'active', 'icon-color')}
  );

  &:hover {
    --_kib-quantity-selector-icon-container-background-color: #{color.get(
        'ct',
        'field',
        'appended-button',
        'error',
        'hover',
        'bg-color'
      )};
    --_kib-quantity-selector-icon-color: #{color.get(
        'ct',
        'field',
        'appended-button',
        'error',
        'hover',
        'icon-color'
      )};
  }

  &:active {
    --_kib-quantity-selector-icon-container-background-color: #{color.get(
        'ct',
        'field',
        'appended-button',
        'error',
        'pressed',
        'bg-color'
      )};
    --_kib-quantity-selector-icon-color: #{color.get(
        'ct',
        'field',
        'appended-button',
        'error',
        'pressed',
        'icon-color'
      )};
  }
 }

@mixin input-container() { ... }@mixin input-container() { 
  flex: 1 1 100%;
  width: 100%;
  text-align: center;
  background-color: var(
    --_kib-quantity-selector-input-background-color,
    #{color.get('ct', 'field', 'input', 'active', 'bg-color')}
  );
  @include typography.style-as('form-text');

  // border to add dividers between input and button
  border: 1px solid;
  border-image-slice: 5;
  border-color: var(
    --_kib-quantity-selector-input-border-color,
    #{color.get('ct', 'field', 'appended-button', 'action', 'active', 'divider-color')}
  );
  color: var(--_kib-quantity-selector-input-text-color, #{settings.$input-text-color});
  border-top: 0;
  border-bottom: 0;
  outline: 0;

  // Hide native spin button
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  appearance: textfield;
 }

@mixin error-state() { ... }@mixin error-state() { 
  --_kib-field-control-border-color: #{settings.$error-state-border-color};
  &:hover {
    @include error-state-control-on-hover;
  }

  &:focus-within,
  &:active {
    @include error-state-control-on-focus;
  }
 }

@mixin error-state-text() { ... }@mixin error-state-text() { 
  color: #{settings.$error-state-text-color};
  @include typography.style-as('form-error');
 }

@mixin helper-text() { ... }@mixin helper-text() { 
  @include typography.style-as('form-helper');
  @include typography.style-as('form-error', 'font-size');
  @include typography.style-as('form-error', 'line-height');

  display: flex;
  margin-top: spacing.get('s1');
  align-items: center;

  & > svg {
    height: unit.rem(16px);
    line-height: unit.rem(16px);
    margin-right: spacing.get('s1');
  }
 }

@mixin title() { ... }@mixin title() { 
  @include typography.style-as('utility-3', 'strong');
  color: #{settings.$title-color};
  margin-bottom: spacing.get('s1');
  display: block;
 }

@mixin loading() { ... }@mixin loading() { 
  text-align: center;
  position: relative;
  flex: 1;

  // border to add dividers between input and button
  border: 1px solid;
  border-image-slice: 5;
  border-color: var(--_kib-quantity-selector-input-border-color, #{settings.$default-border-color});
  color: var(--_kib-quantity-selector-input-text-color, #{settings.$input-text-color});
  border-top: 0;
  border-bottom: 0;
  outline: 0;
  height: 55%;
 }

@mixin read-only() { ... }@mixin read-only() { 
  background-color: #{settings.$read-only-background};
  text-align: center;
  color: #{settings.$read-only-text};
  border: none;

  & > svg {
    display: none;
  }
 }

@mixin read-only-input() { ... }@mixin read-only-input() { 
  width: 100%;
  text-align: start;
  text-indent: spacing.get('s2');
  border: none;
  background-color: #{settings.$read-only-background};
 }

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

  & > svg {
    color: #{settings.$disabled-border-color};

    :focus,
    :active {
      outline: none;
    }
  }
 }

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