/*
 * The app's segmented control (Segmented.js) — a sunken track with a white pill
 * sliding under the chosen option.
 *
 * Every value here was already in the project three times over, under three
 * component prefixes (fixture-statistics.css's period control, club-matches.css's
 * view toggle, shot-map.css's team pair). This is that rule set, stated once.
 * The 3px inset is what makes the pill read as sitting *in* the track rather
 * than on it, and the indicator's width is `--count`-derived because the number
 * of segments is not fixed — a live match at half time offers two, not three.
 */

.segmented {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count, 2), 1fr);
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
}

.segmented__indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--count, 2));
  background: var(--surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-floating);
  transform: translateX(calc(var(--index, 0) * 100%));
  transition: transform var(--duration) var(--easing);
}

.segmented__option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  transition: color var(--duration) var(--easing);
}

.segmented__option[aria-selected="true"] {
  color: var(--text);
}

/*
 * The compact variant: a control carrying marks rather than words, where the
 * padding a line of type needs is padding around nothing. The shot map's
 * home/away crest pair is the shape this exists for.
 */
.segmented--compact .segmented__option {
  padding-block: var(--space-1);
}