/*
 * CN-08 Filter tab bar (segmented pill) — app/components/ui/filter_tab_bar_component.rb
 * `.surface-inset` (base.css) supplies the pill container fill.
 *
 * That fill is rgba(--color-bg, 0.65), so it only reads as a container over a
 * card. Rendered straight onto the page background — which is where both the
 * business referrals list and the referrer referrals list put it — it computes
 * back to the background and the container disappears, leaving the tabs
 * floating as loose text. The hairline keeps the documented inset fill and
 * gives the bar an edge on any background.
 */

.ui-filter-tab-bar {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
}

.ui-filter-tab-bar__track {
  display: flex;
  gap: var(--space-1);
}

.ui-filter-tab-bar--equal {
  width: 100%;
}

.ui-filter-tab-bar--equal .ui-filter-tab-bar__track {
  width: 100%;
}

.ui-filter-tab-bar--equal .ui-filter-tab-bar__item {
  flex: 1 1 0;
}

/* Each pill sized to its own label — for two- or three-tab bars, where
   --equal's full-width stretch turns "Active" into a half-page pill.
   inline-flex alone is not enough to keep the container off the full width:
   in the flex column these pages lay out in, `align-items: stretch` still
   pulls the bar edge-to-edge, which the container hairline makes visible. */
.ui-filter-tab-bar--hug {
  align-self: flex-start;
  width: fit-content;
}

.ui-filter-tab-bar--hug .ui-filter-tab-bar__item {
  flex: 0 0 auto;
}

.ui-filter-tab-bar--scroll .ui-filter-tab-bar__track {
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent, black var(--space-4), black calc(100% - var(--space-4)), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--space-4), black calc(100% - var(--space-4)), transparent);
}

/*
 * The fade must only sit on an edge that actually has content hidden past it.
 * Applied unconditionally (as it was), the leading fade eats the left side of
 * the first pill at scrollLeft 0 — and the first pill is normally the active
 * one, so "All" opened half-dissolved against the bar's own edge, which is
 * what the 20 Aug review saw as the filter banner sitting wrong.
 * scroll_hint_controller.js sets these two classes from the live scroll
 * position; with JS off neither is set and the symmetric fade above stands.
 */
.ui-filter-tab-bar--scroll.is-at-start .ui-filter-tab-bar__track {
  mask-image: linear-gradient(to right, black calc(100% - var(--space-4)), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--space-4)), transparent);
}

.ui-filter-tab-bar--scroll.is-at-end .ui-filter-tab-bar__track {
  mask-image: linear-gradient(to right, transparent, black var(--space-4));
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--space-4));
}

/* Fits without scrolling — no hidden content on either side, so no fade. */
.ui-filter-tab-bar--scroll.is-at-start.is-at-end .ui-filter-tab-bar__track {
  mask-image: none;
  -webkit-mask-image: none;
}

.ui-filter-tab-bar--scroll .ui-filter-tab-bar__track::-webkit-scrollbar {
  display: none;
}

.ui-filter-tab-bar--scroll .ui-filter-tab-bar__item {
  flex: 0 0 auto;
}

.ui-filter-tab-bar__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

/* Tap-target extension (same technique as pagination.css): the pill stays
   painted at --control-h-sm (36px), but an invisible ::before extends the
   actual hit area out to --tap-min (44px) on every side. */
.ui-filter-tab-bar__item::before {
  content: "";
  position: absolute;
  inset: calc((var(--control-h-sm) - var(--tap-min)) / 2);
}

.ui-filter-tab-bar__item:hover {
  background: var(--color-surface-hover);
}

.ui-filter-tab-bar__item.is-active {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
  font-weight: 500;
}

.ui-filter-tab-bar__item.is-active:hover {
  background: var(--color-accent-strong);
}

/*
 * Scroll affordance — the track's own mask-image edge fade (below) only
 * reads as "more content" when a visible sliver of the next pill peeks
 * past it; at pill widths close to the container width that sliver can
 * land entirely inside the fade zone and vanish. This is a persistent,
 * content-independent "scrolls for more" hint layered on top instead —
 * a small fading disc + chevron pinned to the track's right edge,
 * decorative (aria-hidden, the scroll functionality doesn't depend on
 * it) and non-interactive.
 */
.ui-filter-tab-bar__scroll-hint {
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 2px;
  width: var(--space-8);
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background: linear-gradient(to right, transparent, var(--color-surface-inset) 60%);
  color: var(--color-ink-muted);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* scroll_hint_controller.js toggles this once the track is scrolled all
   the way to its end — there's nothing further to hint at. */
.ui-filter-tab-bar__scroll-hint.is-hidden {
  opacity: 0;
}

.ui-filter-tab-bar__spinner {
  animation: ui-spin var(--duration-spin) linear infinite;
}

.ui-filter-tab-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface-inset);
  font-size: var(--text-2xs);
  line-height: var(--text-2xs--line-height);
}

/*
 * A translucent white chip over the accent fill computes to ~#5793E8, and
 * white on that is 3.12:1 — below AA. An opaque white chip carrying the
 * accent ink keeps the same visual weight and passes.
 */
.ui-filter-tab-bar__item.is-active .ui-filter-tab-bar__count {
  background: var(--color-surface-solid);
  color: var(--color-accent-pressed);
}