:root {
  --select-background: var(--color-input);
  --select-foreground: var(--color-input-foreground);
  --select-border: var(--control-border-width) solid var(--color-input-border);
  --select-invalid-border: var(--control-border-width) solid var(--color-error-border);
  --select-disabled-border: var(--control-border-width) solid var(--color-disabled-border);
  --select-radius: var(--control-radius);
  --select-padding: var(--space-2) var(--space-3);
  --select-height: var(--control-target-size);
  --select-font: var(--font-type-label);
  --select-label-font: var(--font-type-label-strong);
  --select-description-font: var(--font-type-caption);
  --select-gap: var(--space-2);
  --select-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --select-picker-padding: var(--space-1);
  --select-picker-gap: var(--space-1);
  --select-picker-height: var(--size-240);
  --select-option-radius: var(--radius-8);
  --select-picker-background: var(--color-popover);
  --select-picker-foreground: var(--color-popover-foreground);
  --select-picker-border: var(--control-border-width) solid var(--color-border);
  /* Options retain the existing popover foreground even when highlighted.
     Adopting selected/accent foregrounds would be a separate visual change. */
  --select-option-selected-background: var(--color-selected);
  --select-option-highlight-background: var(--color-accent);
  --select-picker-icon-color: var(--color-muted-foreground);
}

.select-field {
  display: grid;
  gap: var(--select-gap);
  inline-size: 100%;
  min-inline-size: 0;
  color: var(--select-foreground);
}

.select-field__label {
  font: var(--select-label-font);
  overflow-wrap: anywhere;
}

.select-field__label--hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.select-control {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--select-height);
  padding: var(--select-padding);
  border: var(--select-border);
  border-radius: var(--select-radius);
  background: var(--select-background);
  color: var(--select-foreground);
  font: var(--select-font);
}

.select-control[aria-invalid="true"] { border: var(--select-invalid-border); }
.select-control:disabled {
  background: var(--color-disabled);
  color: var(--color-disabled-foreground);
  border: var(--select-disabled-border);
  cursor: not-allowed;
}
.select-control:focus-visible {
  outline: var(--select-focus-outline);
  outline-offset: var(--focus-offset);
}

.select-field__description,
.select-field__error {
  margin: 0;
  font: var(--select-description-font);
  overflow-wrap: anywhere;
}

.select-field__description { color: var(--color-muted-foreground); }
.select-field__error { color: var(--color-error-text); }

/* Keep ordinary select markup and the native arrow as the fallback. */
@supports (appearance: base-select) and selector(::picker(select)) {
  .select-control--customizable,
  .select-control--customizable::picker(select) {
    appearance: base-select;
  }

  .select-control--customizable {
    align-items: center;
    gap: var(--select-gap);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .select-control--customizable::picker-icon {
    color: var(--select-picker-icon-color);
  }

  .select-control--customizable::picker(select) {
    box-sizing: border-box;
    inline-size: anchor-size(self-inline);
    max-inline-size: 100%;
    max-block-size: var(--select-picker-height);
    overflow: auto;
    margin-block: var(--select-picker-gap);
    padding: var(--select-picker-padding);
    border: var(--select-picker-border);
    border-radius: var(--select-radius);
    background: var(--select-picker-background);
    color: var(--select-picker-foreground);
    font: var(--select-font);
  }

  .select-control--customizable option {
    box-sizing: border-box;
    min-block-size: var(--select-height);
    padding: var(--select-padding);
    border-radius: var(--select-option-radius);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .select-control--customizable option:checked {
    background: var(--select-option-selected-background);
  }

  .select-control--customizable option:hover:not(:disabled):not(:checked),
  .select-control--customizable option:focus:not(:checked) {
    background: var(--select-option-highlight-background);
  }

  .select-control--customizable option:checked:hover:not(:disabled) {
    background: var(--color-selected-hover);
  }

  .select-control--customizable option:disabled {
    background: var(--color-disabled);
    color: var(--color-disabled-foreground);
  }
}