/*
 * Chromium 135+ themeable select popup (base-select). Replaces the OS blue
 * highlight with brand colors. Other browsers keep the native popup and simply
 * drop these rules.
 *
 * WHY THIS IS NOT IN globals.css: Next 16 parses CSS with Lightning CSS, which
 * cannot yet parse `::picker(select) option` — it reads ::picker as a normal
 * pseudo-element and rejects the descendant selector. The @supports guard does
 * not help, because the block still has to be PARSED before it can be skipped.
 * One unparseable rule failed the whole stylesheet and 500'd every page.
 *
 * Served as a static file so the build pipeline never sees it. Safe, because
 * every value here is a CSS custom property resolved by the browser at runtime,
 * so there is nothing for the pipeline to do anyway.
 *
 * Move this back into globals.css once Lightning CSS supports ::picker().
 */
@supports selector(::picker(select)) {
  select,
  select::picker(select) {
    appearance: base-select;
  }

  select::picker(select) {
    background: var(--color-cream);
    color: var(--color-ink);
    border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent);
    border-radius: var(--radius-brand);
    padding: 4px;
  }

  select::picker(select) option {
    background: transparent;
    padding: 10px 14px;
    border-radius: var(--radius-brand);
  }

  select::picker(select) option:hover,
  select::picker(select) option:focus-visible {
    background: var(--color-green);
    color: var(--color-ink);
  }

  select::picker(select) option:checked {
    font-weight: 600;
  }
}