/*
 * The league page's two statistics tabs — Team Stats (LeagueTeamStats.js) and
 * Player Stats (LeaguePlayerStats.js). Both are the same page: sections —
 * Top stats, Attack, Defence, Discipline — each heading a run of cards, each
 * card ranking three of something by one number, the leader's value filled
 * with a club's own colour.
 *
 * So the column and its headings are shared here, and only the row differs:
 * a team's row is `.team-stat__row` below, a player's is the Overview tab's
 * `.leaderboard__row` (leaderboard.css), which already draws a photo, a name
 * and the club under it. The cards around both are `club-overview.css`'s
 * `.club-overview__card` chrome, header and divider — the same borrowing the
 * Overview tab's own leaderboards do.
 */

.league-stats {
  display: flex;
  flex-direction: column;
  /* Wider than the gap between cards inside a section (below), so the
     sections read as separate groups rather than one long column of cards. */
  gap: var(--space-6);
  padding-inline: var(--space-4);
  opacity: 1;
  transition: opacity var(--duration) var(--easing);
}

/* Same UA-rule note as `.club-overview[hidden]` — the `display: flex` above
   wins outright without this. */
.league-stats[hidden] {
  display: none;
}

.league-stats[data-open="false"] {
  opacity: 0;
}

/* --- Section ---------------------------------------------------------------- */

.league-stats__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/*
 * "Attack", "Defence". A level above the cards it heads and a level below the
 * competition's own name at the top of the page — --text-xl for the page,
 * --text-lg here, --text-md for a card's title — so the three read as a
 * hierarchy rather than three sizes of the same thing.
 */
.league-stats__heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text);
}

/* --- Team row ----------------------------------------------------------------
 *
 * Deliberately the leaderboard row's twin minus its second line of text: a
 * club is a crest and a name, where a player is a photo, a name and the club
 * under it. Everything else — the spacing, the value column, the leader pill
 * — is the same, so the two stats tabs read as one design.
 */

.team-stat__rows {
  display: flex;
  flex-direction: column;
}

.team-stat__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding-block: var(--space-3);
  /* Buttons centre their text by UA default — without this the name drifts
     to the middle of the space it stretches into. Same note as
     `.leaderboard__row`. */
  text-align: left;
}

.team-stat__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/* Plain text for everyone below the leader. */
.team-stat__value {
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/*
 * The leader — a solid filled pill, the same treatment (and the same
 * digit-alignment trick, see leaderboard.css for the full reasoning behind
 * the negative margin) the Overview tab's rank-1 leaderboard value gets.
 *
 * What differs is the fill: both stats tabs set it inline to a club's own
 * colour, because that colour is data and no stylesheet rule can know it. The
 * `--accent` here is the fallback for a club that has none — every team in
 * this export outside the league page's invented ones (see `Team` in
 * types.js). The player tab's own pill inherits the identical fallback from
 * `.leaderboard__value--top`.
 */
.team-stat__value--leader {
  padding: var(--space-1) var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-text);
}