/* Shared Kx menus. The native select keeps values, forms and keyboard behavior. */
@supports (appearance: base-select) {
  :root select, :root select::picker(select) { appearance: base-select; }
  :root select {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-inline: 10px;
    background-image: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
  }
  :root select:hover:where(:enabled) { border-color: #ff254073; background-color: #121218; }
  :root select:focus-visible, :root select:open { border-color: var(--red); outline: none; box-shadow: 0 0 14px #ff254012; }
  :root select:disabled { cursor: default; }
  :root select::picker-icon {
    content: '';
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-left: auto;
    border: 0;
    background: currentColor;
    color: #858592;
    mask: url("assets/icons/select-chevron.svg") center / contain no-repeat;
    transition: rotate .18s ease, color .18s ease;
  }
  :root select:open::picker-icon { rotate: 180deg; color: var(--red-soft); }
  :root select::picker(select) {
    min-width: anchor-size(width);
    max-width: min(560px, calc(100vw - 32px));
    max-height: min(320px, 60vh);
    margin-block: 5px;
    padding: 5px;
    border: 1px solid #ff25404d;
    border-radius: 3px;
    outline: none;
    background: linear-gradient(145deg, #19141c, #101015 55%);
    color: #d9d9e2;
    box-shadow: 0 14px 35px #0009, 0 0 18px #ff254008;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #632031 transparent;
  }
  :root select optgroup { padding: 7px 0 3px; color: var(--red-soft); font: 700 9px var(--mono); letter-spacing: 1.2px; }
  :root select optgroup + optgroup { margin-top: 5px; border-top: 1px solid var(--hair); }
  :root select option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 8px 10px;
    border: 0;
    outline: none;
    background: transparent;
    color: #aaaab8;
    font: 500 11px/1.5 var(--display);
    letter-spacing: .1px;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  :root select option + option { border-top: 1px solid #ffffff07; }
  :root select option:checked { background: linear-gradient(90deg, #ff254033, #ff254010); color: #fff; box-shadow: inset 2px 0 var(--red); }
  :root select option:hover:where(:enabled), :root select option:focus-visible:where(:enabled) { background: #ff254026; color: #fff; }
  :root select option::checkmark {
    content: '';
    order: 1;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-left: auto;
    background: var(--red-soft);
    mask: url("assets/icons/select-check.svg") center / contain no-repeat;
  }
  :root select option:disabled { color: #575764; cursor: default; }
  @media (prefers-reduced-motion: reduce) {
    :root select, :root select::picker-icon, :root select option { transition: none; }
  }
}