/*
 * The category chips under the search field: sticky below the top bar, the current one is filled. The link is 44px
 * high, the touch target; the pill that is seen (.chip__label) is 36px, in the middle of it.
 */

@layer components {
  .chips {
    position: sticky;
    top: var(--chrome-h);
    z-index: 10;
    display: flex;
    gap: var(--s-2);
    height: var(--chips-h);
    padding: var(--s-1) var(--s-4);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: var(--tap);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }

  .chip__label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: transparent;
  }

  /* The ring goes around the pill that is seen; the bar has room for it above and below. */
  .chip:focus-visible {
    outline: 0;
  }

  .chip:focus-visible .chip__label {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .chip[aria-current='true'] .chip__label {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
  }

  /* Pressed: the pill dims under the finger. */
  .chip:active .chip__label {
    opacity: 0.6;
  }

  /* A phone on its side has no room for sticky chips under the bars: they scroll away with the page. */
  @media (pointer: coarse) and (max-height: 500px) {
    .chips {
      position: static;
    }
  }

  /* The categories are in the sidebar on an expanded screen. */
  @media (min-width: 1024px) {
    .chips {
      display: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .chip__label {
      transition:
        background-color var(--dur) ease-out,
        color var(--dur) ease-out;
    }
  }
}