/* Pills
 * Shared pill/chip component for tabs, filters, genre chips, day switcher.
 * Pill tabs are horizontal scrollable with hidden scrollbar.
 */

@layer components {
  /* Container for horizontal pill row */
  .pill-row {
    display: flex;
    gap: 6px;
    padding-inline: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;

    &::-webkit-scrollbar { display: none; }
  }

  /* Base pill */
  .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-surface);
    border: 1px solid var(--color-border-interactive);
    color: var(--color-ink-muted);
    cursor: pointer;
    white-space: nowrap;
    min-height: var(--touch-min);
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;

    &:hover {
      color: var(--color-ink);
      border-color: var(--color-ink-muted);
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 2px;
    }
  }

  /* Active pill — Flare accent (default) */
  .pill--active,
  .pill[aria-selected="true"],
  .pill[aria-checked="true"] {
    background: oklch(var(--lch-flare));
    border-color: oklch(var(--lch-flare));
    color: oklch(17% 0.02 276);
  }

  /* Golden active variant (day pills, money context) */
  .pill--golden-active,
  .pill--golden[aria-selected="true"] {
    background: oklch(var(--lch-golden));
    border-color: oklch(var(--lch-golden));
    color: oklch(17% 0.02 276);
  }

  /* UV active variant (genre chips) */
  .pill--uv-active,
  .pill--uv[aria-selected="true"] {
    background: oklch(var(--lch-uv) / 0.15);
    border-color: oklch(var(--lch-uv));
    color: oklch(var(--lch-uv));
  }

  /* Laser active variant */
  .pill--laser-active,
  .pill--laser[aria-selected="true"] {
    background: oklch(var(--lch-laser));
    border-color: oklch(var(--lch-laser));
    color: oklch(17% 0.02 276);
  }

  /* Small pill variant */
  .pill--sm {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-height: auto;
  }

  /* Pill with icon */
  .pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
}