@mixin root-container() { ... }@mixin root-container() { 
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: settings.$background-color;
  box-shadow: 0 0 0 var(--_kib-listbox-border-width, #{kib-field.$control-border-width-large})
      var(--_kib-listbox-border-color, #{kib-field.$control-border-color-focus}),
    0 0 0 var(--_kib-listbox-outline-width, 0)
      var(--_kib-listbox-outline-color, #{kib-field.$control-outline-color});
  padding: 0;
  border-radius: kib-field.$control-border-radius;
  margin-top: #{spacing.get('s2')};
  overflow: hidden;
  z-index: 6;

  max-height: unit.rem(220px);

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

@mixin hidden() { ... }@mixin hidden() { 
  display: none;
 }

@mixin options() { ... }@mixin options() { 
  flex: 1 1 auto;
  overflow-y: auto;
 }

@mixin status() { ... }@mixin status() { 
  @include typography.style-as('utility-2', 'strong');

  font-style: italic;
  flex: 0 0 auto;
  padding: spacing.get('s2') spacing.get('s3');
  margin-bottom: unit.rem(1px);
  color: settings.$item-text-color;
  background-color: color.get('ct', 'field', 'menu', 'container', 'bg-header-color');
  border-top-left-radius: kib-field.$control-border-radius;
  border-top-right-radius: kib-field.$control-border-radius;

  @media (forced-colors: active) {
    border-bottom: unit.rem(1px) transparent solid;
  }
 }

@mixin no-results() { ... }@mixin no-results() { 
  padding: spacing.get('s2') spacing.get('s3');
  color: settings.$item-text-color-inactive;
  margin: auto;
 }

@mixin item() { ... }@mixin item() { 
  @include typography.style-as(settings.$item-typography);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: spacing.get('s2');
  padding: spacing.get('s2', 's4', 's2', 's3');
  cursor: pointer;
  transition: background-color 200ms;

  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }

  &:hover {
    background-color: settings.$hover-background-color;
    color: settings.$item-text-color-hover;

    @media (forced-colors: active) {
      outline: unit.rem(2px) solid Highlight;
      outline-offset: unit.rem(-2px);
    }
  }

  &:active {
    background-color: settings.$active-background-color;
    color: settings.$item-text-color-active;
  }

  &:focus {
    @include item-focus;
  }

  &:last-child {
    border-bottom-left-radius: kib-field.$control-border-radius;
    border-bottom-right-radius: kib-field.$control-border-radius;
  }
 }

@mixin item-focus() { ... }@mixin item-focus() { 
  background-color: settings.$focus-background-color;
  color: settings.$item-text-color-focus;
 }

@mixin item-selected() { ... }@mixin item-selected() { 
  @include typography.style-as('utility-4', 'strong');

  background-color: settings.$selected-background-color;
  color: settings.$item-text-color-selected;
 }

@mixin checkbox-field() { ... }@mixin checkbox-field() { 
  @include kib-checkbox.checkbox-field($block);

  flex-shrink: 0;
  order: 5;
  align-items: center;
 }

@mixin checkbox-control() { ... }@mixin checkbox-control() { 
  @include kib-checkbox.checkbox-control(
    $block,
    $fill-element: 'checkbox-fill',
    $hover-scope: false
  );
 }

@mixin checkbox-fill() { ... }@mixin checkbox-fill() { 
  @include kib-checkbox.checkbox-fill(
    $block,
    $control-element: 'checkbox-control',
    $hover-scope: false
  );
 }

@mixin label() { ... }@mixin label() { 
  flex: 0 1 calc(100% - spacing.get('s2'));
  order: 2;
 }

@mixin icon() { ... }@mixin icon() { 
  display: block;
  flex: 0 0 settings.$item-icon-size;
  width: settings.$item-icon-size;
  height: settings.$item-icon-size;
  z-index: 1;
  transition: color settings.$item-transition-duration ease-out;
  pointer-events: none;
 }

@mixin icon-align-start() { ... }@mixin icon-align-start() { 
  order: 1;
 }

@mixin icon-align-end() { ... }@mixin icon-align-end() { 
  order: 3;
 }

$background-color: color.get('ct', 'field', 'menu', 'container', 'bg-container-color') !default;

$hover-background-color: color.get('ct', 'field', 'menu', 'hover', 'bg-color') !default;

$active-background-color: color.get('ct', 'field', 'menu', 'pressed', 'bg-color') !default;

$focus-background-color: color.get('ct', 'field', 'menu', 'focus', 'bg-color') !default;

$selected-background-color: color.get('ct', 'field', 'menu', 'selected', 'bg-color') !default;

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

$item-typography: 'utility-4' !default;

$item-icon-size: $item-typography-line-height;

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

$item-text-color: color.get('ct', 'field', 'menu', 'unselected', 'text-color') !default;

$item-text-color-inactive: color.get('ct', 'field', 'menu', 'inactive', 'text-color') !default;

$item-text-color-hover: color.get('ct', 'field', 'menu', 'hover', 'text-color') !default;

$item-text-color-active: color.get('ct', 'field', 'menu', 'unselected', 'text-color') !default;

$item-text-color-focus: color.get('ct', 'field', 'menu', 'focus', 'text-color') !default;

$item-text-color-selected: color.get('ct', 'field', 'menu', 'selected', 'text-color') !default;