/**
 * iNKPPL Design System — Pill Bar Component
 * Horizontal scroll container for category/filter pill navigation.
 * Individual pills use .btn--pill from button.css.
 *
 * @version 1.0.0
 * @date 2026-03-10
 */

/* ==========================================================================
   1. Container
   ========================================================================== */

.pill-bar {
  padding: var(--space-5) 0 var(--space-2);
}

/* ==========================================================================
   2. Scroll List
   ========================================================================== */

.pill-bar__list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--space-1) var(--space-1);
  -webkit-overflow-scrolling: touch;
}

.pill-bar__list::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   3. Category Active States
   ========================================================================== */

.pill-bar__list .btn--pill[data-c="all"].active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: transparent;
}

.pill-bar__list .btn--pill[data-c="artists"].active {
  background: var(--color-cat-artists);
  border-color: transparent;
  color: #fff;
}

.pill-bar__list .btn--pill[data-c="interview"].active {
  background: var(--color-cat-interview);
  border-color: transparent;
  color: #fff;
}

.pill-bar__list .btn--pill[data-c="community"].active {
  background: var(--color-cat-community);
  border-color: transparent;
  color: #fff;
}

.pill-bar__list .btn--pill[data-c="models"].active {
  background: var(--color-cat-models);
  border-color: transparent;
  color: #fff;
}

.pill-bar__list .btn--pill[data-c="trends"].active {
  background: var(--color-cat-trends);
  border-color: transparent;
  color: #fff;
}

.pill-bar__list .btn--pill[data-c="knowledge"].active {
  background: var(--color-cat-knowledge);
  border-color: transparent;
  color: #000;
}

.pill-bar__list .btn--pill[data-c="events"].active {
  background: var(--color-cat-events);
  border-color: transparent;
  color: #fff;
}

.pill-bar__list .btn--pill[data-c="equipment"].active {
  background: var(--color-cat-equipment);
  border-color: transparent;
  color: #000;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pill-bar__list .btn--pill {
    transition: none;
  }
}