:host {
  --_height: var(--select-container-height-medium);
  --_padding-inline: var(--select-container-padding-inline-medium);
  --_gap: var(--select-container-gap-medium);
  --_radius: var(--select-container-border-radius);
  --_border-width-default: var(--select-container-border-width-default);
  --_border-width-emphasized: var(--select-container-border-width-emphasized);
  --_focus-ring-width: var(--select-container-focus-ring-width);
  --_transition-duration: var(--select-container-transition-duration);
  --_transition-easing: var(--select-container-transition-timing-function);

  --_control-font-size: var(--select-control-font-size-medium);
  --_control-line-height: var(--select-control-line-height-medium);
  --_icon-size: var(--select-icon-size-medium);
  --_chevron-size: var(--select-chevron-size-medium);

  --_option-min-block-size: var(--select-option-min-block-size-medium);
  --_option-font-size: var(--select-option-font-size-medium);
  --_option-line-height: var(--select-option-line-height-medium);
  --_option-icon-size: var(--select-option-icon-size-medium);

  --_bg: var(--select-default-background-default);
  --_text: var(--select-default-text-default);
  --_text-placeholder: var(--select-default-text-placeholder);
  --_border-color: var(--select-default-border-default);
  --_border-color-hover: var(--select-default-border-hover);
  --_border-color-focus: var(--select-default-border-focus);
  --_focus-ring-color: var(--select-default-focus-ring);

  display: flex;
  flex-direction: column;
  gap: var(--select-field-gap);
  inline-size: 100%;
  font-family: var(--select-control-font-family);
  color: var(--_text);
}

:host([size='large']) {
  --_height: var(--select-container-height-large);
  --_padding-inline: var(--select-container-padding-inline-large);
  --_gap: var(--select-container-gap-large);
  --_control-font-size: var(--select-control-font-size-large);
  --_control-line-height: var(--select-control-line-height-large);
  --_icon-size: var(--select-icon-size-large);
  --_chevron-size: var(--select-chevron-size-large);
  --_option-min-block-size: var(--select-option-min-block-size-large);
  --_option-font-size: var(--select-option-font-size-large);
  --_option-line-height: var(--select-option-line-height-large);
  --_option-icon-size: var(--select-option-icon-size-large);
}

:host(.variant-destructive) {
  --_border-color: var(--select-destructive-border-default);
  --_border-color-hover: var(--select-destructive-border-hover);
  --_border-color-focus: var(--select-destructive-border-focus);
  --_focus-ring-color: var(--select-destructive-focus-ring);
}

/* ---------- Label ---------- */

.label {
  display: flex;
  align-items: center;
  gap: var(--select-label-gap);
  font-family: var(--select-label-font-family);
  font-size: var(--select-label-font-size);
  line-height: var(--select-label-line-height);
  font-weight: var(--select-label-font-weight);
  color: var(--select-label-color-default);
  inline-size: 100%;
  min-inline-size: 0;
}

.label-text {
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.required-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--select-label-required-mark-size);
  block-size: var(--select-label-required-mark-size);
  color: var(--select-label-required-mark-color);
  font-weight: var(--select-control-font-weight);
  line-height: 1;
}

:host(.is-disabled) .label {
  color: var(--select-label-color-disabled);
}

:host(.is-disabled) .required-mark {
  color: var(--select-label-color-disabled);
}

:host(:not(.has-label)) .label {
  display: none;
}

/* ---------- Control row ---------- */

.control-wrapper {
  position: relative;
  inline-size: 100%;
}

.control {
  display: flex;
  align-items: center;
  gap: var(--_gap);
  block-size: var(--_height);
  padding-inline: var(--_padding-inline);
  background-color: var(--_bg);
  border: var(--_border-width-default) solid var(--_border-color);
  border-radius: var(--_radius);
  /* The whole control row opens the listbox (clicks on the chevron / icon-start
     are forwarded to the trigger), so the pointer cursor covers all of it. */
  cursor: pointer;
  transition:
    border-color var(--_transition-duration) var(--_transition-easing),
    box-shadow var(--_transition-duration) var(--_transition-easing),
    background-color var(--_transition-duration) var(--_transition-easing);
}

:host(:not(.is-disabled):not(.is-focused):not(.is-open):hover) .control {
  border-color: var(--_border-color-hover);
  box-shadow: inset 0 0 0 calc(var(--_border-width-emphasized) - var(--_border-width-default))
    var(--_border-color-hover);
}

:host(.is-focused:not(.is-disabled)) .control,
:host(.is-open:not(.is-disabled)) .control {
  border-color: var(--_border-color-focus);
  box-shadow:
    inset 0 0 0 calc(var(--_border-width-emphasized) - var(--_border-width-default)) var(--_border-color-focus),
    0 0 0 var(--spacing-4) var(--_focus-ring-color);
}

:host(.is-readonly:not(.is-disabled)) .control {
  cursor: default;
}

:host(.is-disabled) .control {
  background-color: var(--select-default-background-disabled);
  border-color: var(--select-default-border-disabled);
  cursor: not-allowed;
}

/* ---------- Icon slots / chevron ---------- */

.control-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--_icon-size);
  block-size: var(--_icon-size);
  color: var(--select-icon-color-default);
}

.control-icon-end .chevron {
  inline-size: var(--_chevron-size);
  block-size: var(--_chevron-size);
  color: var(--select-chevron-color-default);
  transition: transform var(--select-chevron-transition-duration) var(--select-chevron-transition-timing-function);
}

:host(.is-open) .control-icon-end .chevron {
  transform: rotate(180deg);
}

:host(.is-disabled) .control-icon,
:host(.is-disabled) .control-icon-end .chevron {
  color: var(--select-chevron-color-disabled);
}

:host(:not(.has-icon-start)) .control-icon-start {
  display: none;
}

::slotted([slot='icon-start']) {
  color: inherit;
}

/* ---------- Trigger button ---------- */

.trigger {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  /* Its natural line-height box, centred by `.control`'s flex — stretching it to
     the full row instead leaves the browser to centre the text itself, which
     lands a pixel lower than the rest of the design system. */
  block-size: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--_control-font-size);
  line-height: var(--_control-line-height);
  font-weight: var(--select-control-font-weight);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: start;
  /* An input cannot hold a child to truncate, so it truncates itself. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A searchable control takes text, so it reads as one. */
:host([searchable]:not([readonly]):not([disabled])) .trigger {
  cursor: text;
}

.trigger::placeholder {
  color: var(--_text-placeholder);
  opacity: 1;
}

.trigger:disabled {
  cursor: not-allowed;
  color: var(--select-default-text-disabled);
  -webkit-text-fill-color: var(--select-default-text-disabled);
}

:host(.is-readonly:not(.is-disabled)) .trigger {
  cursor: default;
}

.trigger:focus,
.trigger:focus-visible {
  outline: none;
}

/* No selection: the field shows its placeholder, which needs the muted colour
   even where `::placeholder` does not reach. */
.trigger.is-placeholder {
  color: var(--_text-placeholder);
}

/* Disabled outranks placeholder. Both are one class plus one qualifier, so
   source order alone decided it and the later placeholder rule was winning. */
:host(.is-disabled) .trigger.is-placeholder {
  color: var(--select-default-text-disabled);
}

/* ---------- Listbox popover ---------- */

.listbox {
  position: absolute;
  inset-inline-start: 0;
  inline-size: 100%;
  inset-block-start: calc(100% + var(--select-listbox-margin-block-start));
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--select-listbox-gap);
  padding: var(--select-listbox-padding);
  background-color: var(--select-listbox-background);
  border: var(--select-listbox-border-width) solid var(--select-listbox-border-color);
  border-radius: var(--select-listbox-border-radius);
  box-shadow: var(--select-listbox-shadow);
  /* positionListbox() sets `--_listbox-max-block-size` inline to whatever fits
     the viewport; falls back to the token cap before the first measure. */
  max-block-size: var(--_listbox-max-block-size, var(--select-listbox-max-block-size));
  overflow-y: auto;
}

/* Not enough room below the control → flip the popover above it. */
:host(.is-drop-up) .listbox {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--select-listbox-margin-block-start));
}

.listbox[hidden] {
  display: none;
}

/* ---------- groups + separators ---------- */

/* A nested column rather than `display: contents`, whose role is still dropped
   by some assistive technology — the group has to keep announcing itself. The
   gap repeats the listbox's so grouped and loose options share one rhythm. */
.option-group {
  display: flex;
  flex-direction: column;
  gap: var(--select-listbox-gap);
}

.group-heading {
  display: flex;
  align-items: center;
  gap: var(--select-group-gap);
  padding-inline: var(--select-group-padding-inline);
  padding-block: var(--select-group-padding-block);
}

.group-label {
  font-family: var(--select-group-font-family);
  font-size: var(--select-group-font-size);
  font-weight: var(--select-group-font-weight);
  line-height: var(--select-group-line-height);
  color: var(--select-group-color);
}

/* A heading carries its own rule, as the Figma Section Heading does. */
.option-group::before {
  block-size: var(--select-separator-thickness);
  margin-block: var(--select-separator-margin-block);
  background-color: var(--select-separator-color);
  content: '';
}

/* A rule against the panel's rounded top edge divides nothing. */
.option-group:first-child::before {
  display: none;
}

.listbox-separator {
  flex: none;
  block-size: var(--select-separator-thickness);
  margin-block: var(--select-separator-margin-block);
  background-color: var(--select-separator-color);
}

.listbox-empty {
  padding: var(--spacing-8) var(--spacing-12);
  font-size: var(--_option-font-size);
  line-height: var(--_option-line-height);
  color: var(--_text-placeholder);
}

/* ---------- Listbox option ---------- */

.option {
  display: flex;
  align-items: center;
  gap: var(--select-option-gap);
  min-block-size: var(--_option-min-block-size);
  padding-block: var(--select-option-padding-block);
  /* Figma fills the Default row explicitly. The token follows the theme, so a
     dark surface stays dark rather than being pinned white. */
  background-color: var(--select-option-background-default);
  padding-inline-start: var(--select-option-padding-inline);
  /* Figma reserves the wider end padding for a row with no trailing checkmark. */
  padding-inline-end: var(--select-option-padding-inline-end);
  border-radius: var(--select-option-border-radius);
  color: var(--select-option-text-default);
  font-family: var(--select-option-font-family);
  font-size: var(--_option-font-size);
  line-height: var(--_option-line-height);
  font-weight: var(--select-option-font-weight-default);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--_transition-duration) var(--_transition-easing),
    color var(--_transition-duration) var(--_transition-easing);
}

.option.is-highlighted {
  background-color: var(--select-option-background-hover);
}

/* A trailing checkmark fills the space that end padding otherwise reserves. */
.option.is-selected {
  padding-inline-end: var(--select-option-padding-inline-end-trailing);
}

.option.is-selected {
  background-color: var(--select-option-background-selected);
  color: var(--select-option-text-selected);
  font-weight: var(--select-option-font-weight-selected);
}

.option.is-selected.is-highlighted {
  background-color: var(--select-option-background-active);
}

.option.is-disabled {
  color: var(--select-option-text-disabled);
  cursor: not-allowed;
  background-color: transparent;
}

/* A long label wraps onto a second line and is cut with an ellipsis there
   (Figma 797:42585, 797:42582), as in mud-menu. */
.option-label {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.option-check {
  inline-size: var(--_option-icon-size);
  block-size: var(--_option-icon-size);
  flex-shrink: 0;
  color: var(--select-option-check-color);
}

/* ---------- Assistive (helper / error) ---------- */

.assistive {
  display: flex;
  align-items: flex-start;
  gap: var(--select-assistive-gap-default);
  font-family: var(--select-assistive-font-family);
  font-size: var(--select-assistive-font-size);
  line-height: var(--select-assistive-line-height);
  font-weight: var(--select-assistive-font-weight);
  color: var(--select-assistive-color-default);
  inline-size: 100%;
  min-inline-size: 0;
}

.assistive-error {
  gap: var(--select-assistive-gap-error);
  color: var(--select-assistive-color-error);
}

.assistive-icon {
  flex-shrink: 0;
  inline-size: var(--select-assistive-icon-size);
  block-size: var(--select-assistive-icon-size);
  margin-block-start: 0;
}

.assistive-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
}

/* ---------- Hidden default slot (option children sink) ---------- */

.default-slot {
  display: none;
}

/* ---------- prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .control,
  .option,
  .control-icon-end .chevron {
    transition: none;
  }
}