/* Phenix native dropdown theme.
   The actual select and options remain intact for keyboard navigation,
   form submission, validation, disabled fields and dynamically rendered views.
   Browsers without customizable selects retain their native dark picker. */
select {
  color-scheme: dark;
  accent-color: #c95748;
}
select option,
select optgroup {
  background-color: #111216;
  color: #efede6;
}

@supports (appearance: base-select) and selector(select::picker(select)) {
  select:not([multiple]):not([size]),
  select:not([multiple])[size="0"],
  select:not([multiple])[size="1"],
  select:not([multiple]):not([size])::picker(select),
  select:not([multiple])[size="0"]::picker(select),
  select:not([multiple])[size="1"]::picker(select) {
    appearance: base-select;
  }

  select:not([multiple]):not([size]),
  select:not([multiple])[size="0"],
  select:not([multiple])[size="1"] {
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-align: start;
  }

  select::picker-icon {
    color: #d8786b;
    margin-inline-start: auto;
    flex-shrink: 0;
    transition: rotate 0.16s ease;
  }
  select:open::picker-icon {
    rotate: 180deg;
  }
  select:open {
    border-color: #b75d51;
  }
  select:focus-visible {
    outline: 2px solid #e88779;
    outline-offset: 3px;
  }
  select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  select::picker(select) {
    color-scheme: dark;
    background: #101216;
    color: #efede6;
    border: 1px solid #68443f;
    border-radius: 6px;
    padding: 5px;
    margin-block: 6px;
    max-block-size: min(320px, 65dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 14px 38px #0009, inset 0 1px #ffffff08;
    font: inherit;
  }
  select option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #e5e2dc;
    line-height: 1.4;
    cursor: pointer;
    white-space: normal;
  }
  select option + option {
    margin-block-start: 2px;
  }
  select option:checked {
    background: #36201f;
    border-color: #76433b;
    color: #fff1e9;
  }
  select option:not(:disabled):hover,
  select option:not(:disabled):focus-visible {
    background: #492824;
    border-color: #b46659;
    color: #fff5ef;
    outline: none;
  }
  select option::checkmark {
    order: 1;
    margin-inline-start: auto;
    color: #ee9485;
  }
  select option:disabled,
  select optgroup:disabled option {
    color: #777a82;
    cursor: not-allowed;
  }
}

@media (prefers-reduced-motion: reduce) {
  select::picker-icon {
    transition: none;
  }
}
@media (forced-colors: active) {
  select,
  select::picker(select),
  select option,
  select optgroup {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
  }
  select:focus-visible {
    outline-color: Highlight;
  }
  select option:checked,
  select option:not(:disabled):hover,
  select option:not(:disabled):focus-visible {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  select::picker-icon,
  select option::checkmark {
    color: currentColor;
  }
}