/*
 * @name Showcase
 * @description Compact and contemporary in sky blue, with flat items, subtle borders and check marks.
 * @author emmgeede
 *
 * GridSelect "showcase" theme: a compact, contemporary look in sky blue on top of gridselect.css.
 * Load it after gridselect.css. It sits in its own layer, declared after "gridselect",
 * so it wins over the default stylesheet and still loses to any CSS of your own.
 *
 * Accessibility: text 4.5:1 or more (also on hover, cursor and selected backgrounds), the
 * chevron, the focus and cursor indicators and the selected-chip border 3:1 or more, in light
 * and dark mode. Targets stay at least 32 px high. Selected entries show a check mark and bold
 * text, so their state never depends on colour alone.
 * Unlike gridselect.css, resting borders are subtle: WCAG 1.4.11 asks for 3:1 only where the
 * border is needed to identify a control. The field is identified by its text and chevron,
 * the search input is always focused while the panel is open and then shows a 3:1 border.
 */
@layer gridselect-showcase {
  :root,
  [data-theme="light"] {
    --gs-bg: #ffffff;
    --gs-item-bg: #ffffff;
    --gs-fg: #0f172a;
    --gs-muted: #5b6575;
    --gs-border: #e2e8f0;
    --gs-subtle-border: #e2e8f0;
    --gs-field-bg: #ffffff;
    --gs-search-bg: #f8fafc;
    --gs-accent: #0284c7;
    --gs-accent-fg: #0f172a;
    --gs-accent-text: #0369a1;
    --gs-ring: #0284c7;
    --gs-halo: rgb(2 132 199 / 0.18);
    --gs-hover: #f1f5f9;
    --gs-selected-bg: #e0f2fe;
    --gs-check: #0369a1;
    --gs-key-bg: #f1f5f9;
    --gs-key-fg: #475569;
    --gs-key-selected-bg: #ffffff;
    --gs-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 12px 32px -8px rgb(15 23 42 / 0.18);
    --gs-field-shadow: 0 1px 2px rgb(15 23 42 / 0.05);

    --gs-font: inherit;
    --gs-radius: 0.5rem;
    --gs-gap: 0.25rem;
    --gs-item-min-height: 2rem;
    --gs-item-padding: 0.3rem 0.55rem;
    --gs-item-min-width: 6rem;
    --gs-focus-width: 2px;
    --gs-panel-width: min(42rem, 100vw - 2rem);
    --gs-list-max-height: 17rem;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --gs-bg: #111827;
      --gs-item-bg: #111827;
      --gs-fg: #e2e8f0;
      --gs-muted: #94a3b8;
      --gs-border: #263244;
      --gs-subtle-border: #1f2937;
      --gs-field-bg: #1a2332;
      --gs-search-bg: #1a2332;
      --gs-accent: #38bdf8;
      --gs-accent-fg: #e2e8f0;
      --gs-accent-text: #7dd3fc;
      --gs-ring: #38bdf8;
      --gs-halo: rgb(56 189 248 / 0.22);
      --gs-hover: #1f2937;
      --gs-selected-bg: #0c2d48;
      --gs-check: #7dd3fc;
      --gs-key-bg: #273244;
      --gs-key-fg: #cbd5e1;
      --gs-key-selected-bg: #123e5e;
      --gs-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -8px rgb(0 0 0 / 0.6);
      --gs-field-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    }
  }

  [data-theme="dark"] {
    --gs-bg: #111827;
    --gs-item-bg: #111827;
    --gs-fg: #e2e8f0;
    --gs-muted: #94a3b8;
    --gs-border: #263244;
    --gs-subtle-border: #1f2937;
    --gs-field-bg: #1a2332;
    --gs-search-bg: #1a2332;
    --gs-accent: #38bdf8;
    --gs-accent-fg: #e2e8f0;
    --gs-accent-text: #7dd3fc;
    --gs-ring: #38bdf8;
    --gs-halo: rgb(56 189 248 / 0.22);
    --gs-hover: #1f2937;
    --gs-selected-bg: #0c2d48;
    --gs-check: #7dd3fc;
    --gs-key-bg: #273244;
    --gs-key-fg: #cbd5e1;
    --gs-key-selected-bg: #123e5e;
    --gs-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -8px rgb(0 0 0 / 0.6);
    --gs-field-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  }

  [data-gridselect] {
    gap: 0.4rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  [data-gridselect] > legend {
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  /* Below the threshold: compact chips */
  [data-gridselect] > label {
    gap: 0.4rem;
    padding: 0.3rem 0.65rem 0.3rem 0.45rem;
    border-color: var(--gs-subtle-border);
    border-radius: 0.5rem;
    background: var(--gs-field-bg);
    font-weight: 500;
    box-shadow: var(--gs-field-shadow);
  }

  [data-gridselect] > label:hover {
    background: var(--gs-hover);
  }

  [data-gridselect] > label:has(:checked) {
    border-color: var(--gs-accent);
    background: var(--gs-selected-bg);
    color: var(--gs-fg);
    font-weight: 600;
  }

  /* Panel items: flat rows, highlighted on hover and under the cursor */
  .gridselect__item {
    gap: 0.45rem;
    font-size: 0.8125rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    font-weight: 450;
    line-height: 1.3;
  }

  .gridselect__item:hover {
    background: var(--gs-hover);
  }

  .gridselect__item[data-cursor] {
    outline: 0;
    background: var(--gs-hover);
    box-shadow: inset 0 0 0 var(--gs-focus-width) var(--gs-ring);
  }

  .gridselect__item[aria-selected="true"] {
    background: var(--gs-selected-bg);
    color: var(--gs-fg);
    font-weight: 600;
  }

  .gridselect__item[data-match][aria-selected="true"] {
    color: var(--gs-accent-text);
  }

  /* Check mark on selected entries: a colour-independent state cue */
  [data-gridselect] > label:has(:checked)::after,
  .gridselect__item[aria-selected="true"]::after {
    content: "";
    flex-shrink: 0;
    width: 0.3rem;
    height: 0.6rem;
    margin-inline-start: auto;
    margin-inline-end: 0.2rem;
    border-right: 2px solid var(--gs-check);
    border-bottom: 2px solid var(--gs-check);
    transform: translateY(-0.08rem) rotate(45deg);
  }

  /* Field: a quiet select-like trigger */
  .gridselect__field {
    background: var(--gs-field-bg);
    min-width: min(15rem, 100%);
    min-height: 2.25rem;
    padding: 0.35rem 2rem 0.35rem 0.7rem;
    border-radius: 0.5rem;
    box-shadow: var(--gs-field-shadow);
    font-weight: 500;
  }

  .gridselect__field::after {
    inset-inline-end: 0.8rem;
    width: 0.35rem;
    height: 0.35rem;
    border-width: 0 1.5px 1.5px 0;
    color: var(--gs-muted);
  }

  /* Focus: accent border plus a soft halo instead of a heavy ring */
  [data-gridselect] > label:has(:focus-visible),
  .gridselect__field:focus-visible,
  .gridselect__search:focus-visible {
    outline: 0;
    border-color: var(--gs-ring);
    box-shadow: 0 0 0 3px var(--gs-halo);
  }

  .gridselect__panel {
    padding: 0.4rem;
    border: 1px solid var(--gs-subtle-border);
    border-radius: 0.75rem;
  }

  .gridselect__search {
    min-height: 2.25rem;
    margin: 0 0 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    background: var(--gs-search-bg);
  }

  .gridselect__items {
    padding: 2px;
    gap: 0.125rem 0.25rem;
  }

  .gridselect__items--list .gridselect__item {
    border-radius: 0.375rem;
  }

  .gridselect__empty {
    padding: 0.6rem 0.5rem;
    font-size: 0.8125rem;
  }

  /* Digit badge: a small keycap */
  .gridselect__key {
    min-width: 1.5rem;
    min-height: 1.15rem;
    margin-inline-start: 0;
    padding: 0 0.25rem;
    border: 1px solid var(--gs-subtle-border);
    border-radius: 0.3rem;
    background: var(--gs-key-bg);
    color: var(--gs-key-fg);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .gridselect__item[aria-selected="true"] > .gridselect__key,
  [data-gridselect] > label:has(:checked) > .gridselect__key {
    border-color: transparent;
    background: var(--gs-key-selected-bg);
    color: var(--gs-key-fg);
  }
}