@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, 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
  border-radius: unit.rem(8px);
  height: unit.rem(40px);
  min-width: unit.rem(140px);
  background-color: var(--kib-quantity-selector-background-color, #{color.get('ui-bg', 'primary')});
  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-width: #{settings.$control-outline-width};

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

  // 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: color.get('ui-bg', 'primary');
  transition: 0.4s;
  height: 100%;
  flex: 0 0 unit.rem(35px);
  padding: unit.rem(7px);
  user-select: none;
  z-index: 2;
  cursor: pointer;

  &:focus {
    outline: none;
  }

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

    --kib-field-control-border-width: #{settings.$default-border-width};
  }

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

@mixin input-container() { ... }@mixin input-container() { 
  flex: 1 1 100%;
  width: 100%;
  text-align: center;
  background-color: color.get('ui-bg', 'primary');
  @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, #{settings.$default-border-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};
 }

@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() { 
  font-size: unit.rem(14px);
  line-height: unit.rem(16px);
  font-weight: 500;
  color: #{settings.$title-color};
  margin-bottom: spacing.get(s1);
  display: block;
  @include typography.style-as('form-label');
 }

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