/*
 * Active filters, said in words, between the app bar and the date strip.
 *
 * Full-bleed scroller with the inset on the track, the league strip's own
 * arrangement: the first chip lines up with the bar above it and the last can
 * still scroll clear of the screen edge. Above the date strip rather than below
 * it because the strip is sticky and this is not — a summary belongs to the
 * header it reports on, and follows it off screen.
 *
 * Chips arrive and leave one at a time. The row is diffed rather than rebuilt
 * (see FilterSummary.js), which is what makes that possible: only the chip that
 * actually changed animates, so adding a fourth filter does not re-announce the
 * three already sitting there.
 */

.filter-summary {
  margin-top: var(--space-4);
  /* Room for the press scale to travel into without clipping against the
     scroller's own overflow. */
  padding-block: 2px;
}

/* A class beats the UA [hidden] rule, so display has to be turned off by hand. */
.filter-summary[hidden] {
  display: none;
}

.filter-summary__track {
  display: flex;
  gap: var(--space-2);
  width: max-content;
  padding-inline: var(--space-3);
}

/*
 * The same white card the app bar and the date strip wear, at chip size — so
 * the row reads as more of the same chrome rather than as a new kind of object
 * arriving between them.
 */
.filter-summary__chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
}

/*
 * Padding is lopsided on purpose: the × carries its own hit area on the right,
 * so the label only owes the chip an edge on the left.
 */
.filter-summary__label {
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.filter-summary__remove {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: 3px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  transition:
    background-color var(--duration) var(--easing),
    color var(--duration) var(--easing);
}

/* The visible disc stays 24px; the touch target does not. A destructive tap
   at two-thirds of the minimum comfortable size was begging for misses — the
   overlay grows the hit area to 40px without moving a pixel of layout. */
.filter-summary__remove::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.filter-summary__remove:active {
  background: var(--surface-sunken);
  color: var(--text);
}

/* The focus outline follows the chip's own halves rather than base.css's
   square, which would cut the corners off a stadium. */
.filter-summary__label:focus-visible,
.filter-summary__remove:focus-visible {
  border-radius: var(--radius-full);
}

/*
 * The Live chip keeps its colour out here too — same rule as inside the sheet,
 * and the same reason: this is the app's one standout signal naming the one
 * fact it owns, on the type rather than behind it.
 */
.filter-summary__chip--live .filter-summary__label {
  color: var(--highlight);
  font-weight: var(--weight-bold);
}

/* --- Arriving and leaving -------------------------------------------------- */

/*
 * A chip is an object appearing, which is what --spring is for. It comes in
 * under its resting size rather than over it: the row sits directly under the
 * app bar, and a chip that overshot outward would push against the card above
 * on the way in.
 */
.filter-summary__chip[data-entering="true"] {
  animation: filter-summary-in var(--spring-duration) var(--spring) backwards;
}

@keyframes filter-summary-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}

/*
 * Leaving, the chip collapses its own width to nothing so the row closes up
 * around it instead of stepping shut when the node is finally dropped. The
 * width it starts from is pinned in JS — `auto` is not a value the browser can
 * interpolate away from.
 *
 * `min-width: 0` is load-bearing: a flex item's automatic minimum size is its
 * min-content width, which would hold the chip open at its label's width no
 * matter what `width` said.
 *
 * The negative margin eats one flex gap as it goes. Collapsed to zero width the
 * chip still sits between two gaps where there was one, and without this the
 * row would end up 8px wider than it should be until the node was removed —
 * then close that last 8px in a single step, which is the cut being avoided.
 */
.filter-summary__chip[data-leaving="true"] {
  min-width: 0;
  margin-inline-start: calc(-1 * var(--space-2));
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition:
    width var(--duration) var(--easing),
    margin-inline-start var(--duration) var(--easing),
    opacity var(--duration) var(--easing),
    transform var(--duration) var(--easing);
}

@media (prefers-reduced-motion: reduce) {
  .filter-summary__chip[data-entering="true"] {
    animation: none;
  }
}