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

  // TODO min-height:need later
  max-height: unit.rem(220px); // TODO need confirmation

  @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('form-dropdown-header');

  flex: 0 0 auto;
  padding: spacing.get('s2') spacing.get('s3');
  margin-bottom: unit.rem(1px);
  color: color.get('text', 'secondary');
  background-color: color.get('field', '02');
  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: color.get('text', 'secondary');
  font-style: italic;
  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'); // TODO need to adjust vertical spacing
  cursor: pointer;
  transition: background-color 200ms;

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

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

@mixin item-active() { ... }@mixin item-active() { 
  background-color: color.get('field', '03');

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

@mixin item-hover() { ... }@mixin item-hover() { 
  @include item-active;
 }

@mixin checkbox() { ... }@mixin checkbox() { 
  @include kib-choices.choice-control-custom-base;
  @include kib-checkbox.checkbox-control-custom-base;

  order: 5;
 }

@mixin checkbox-fill() { ... }@mixin checkbox-fill() { 
  @include kib-checkbox.checkbox-control-fill;
 }

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

@mixin selected-checkbox-fill() { ... }@mixin selected-checkbox-fill() { 
  @include kib-checkbox.checkbox-control-fill-checked;
 }

@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('field', 'primary') !default;

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

$item-typography: 'form-text' !default;

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

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