/* Horizontal, scrollable row of filter pills (the category filter on the feed
   and search pages). Chips compose .pill-toggle. Layer order in _global.css. */

@layer components {
  .filter-bar {
    display: flex;
    gap: var(--inline-space-half);
    overflow-x: auto;
    padding: 0.5rem var(--inline-space) 0.75rem;
    scrollbar-width: none;
    view-transition-name: filter-bar;

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

  /* Composes .pill-toggle (shape, color, hover, --on fill); keeps only the
     horizontal-scroll-row deltas. Active state uses .pill-toggle--on. */
  .filter-bar__chip {
    flex: none;
    white-space: nowrap;
  }
}