/* Rozbalený seznam nativního <select> v Chromiu 135+ (appearance: base-select).
   Soubor jde mimo sestavení schválně: minifikátor CSS zatím nezná
   `::picker(select)`, zkomolí ho a pravidlo pro otevřený seznam zahodí.
   Vrstva `base` je tatáž jako v global.css. Soubor se načte dřív než sestavený
   styl, proto `html select`: obecné `select { appearance: none }` z global.css
   by ho jinak přebilo. */
/* stejné pořadí vrstev jako Tailwind, kdyby se tenhle soubor načetl dřív */
@layer theme, base, components, utilities;

@layer base {
  @supports (appearance: base-select) {
    html select,
    ::picker(select) {
      appearance: base-select;
    }
    html select {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background-image: none;
      padding-right: 10px !important;
    }
    select::picker-icon {
      content: "";
      flex: none;
      width: 12px;
      height: 12px;
      margin-left: auto;
      background: var(--chev) center / 12px 12px no-repeat;
      transition: rotate 0.15s;
    }
    select:open {
      border-color: var(--teal) !important;
      box-shadow: 0 0 0 3px var(--ring);
    }
    select:open::picker-icon {
      rotate: 180deg;
    }
    ::picker(select) {
      margin-block: 4px;
      padding: 4px;
      min-width: anchor-size(width);
      max-height: min(320px, 50vh);
      overflow-y: auto;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: var(--surface);
      color: var(--ink);
      box-shadow: var(--shadow-lg);
      opacity: 0;
      translate: 0 -4px;
      transition: opacity 0.12s, translate 0.12s, display 0.12s allow-discrete, overlay 0.12s allow-discrete;
    }
    ::picker(select):popover-open {
      opacity: 1;
      translate: 0 0;
    }
    @starting-style {
      ::picker(select):popover-open {
        opacity: 0;
        translate: 0 -4px;
      }
    }
    option {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 36px;
      padding: 6px 10px;
      border-radius: 5px;
      background: transparent;
      font: 400 15px/1.3 var(--f-text);
      cursor: pointer;
      white-space: nowrap;
    }
    option:hover,
    option:focus-visible {
      background: var(--hov);
      outline: none;
    }
    option:checked {
      background: var(--surface-2);
    }
    option::checkmark {
      order: 1;
      margin-left: auto;
      content: "✓";
      color: var(--teal);
      font-weight: 700;
    }
    option:disabled {
      color: var(--ink-faint);
      cursor: default;
    }
  }
}