/*
 * The competition page — back button, identity block, tab bar, and the panels
 * behind it. Structurally the club page's own layout (club-details.css):
 * same two-layer fade/rise shell, same bar and identity treatment, minus the
 * follow control this page has no state slice for.
 */

.league-details {
  --enter-y: 12px;

  position: fixed;
  inset: 0;
  /*
   * Above the club page's 95 — this opens from a competition badge on that
   * page's Overview/Matches tabs, as well as from search overlay's 90, so a
   * surface opened from either has to win. Below the story viewer's 100,
   * which cannot be up at the same time.
   */
  z-index: 97;
  display: flex;
  max-width: var(--app-max-width);
  margin-inline: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.league-details[hidden] {
  display: none;
}

.league-details[data-open="true"] {
  --enter-y: 0px;

  opacity: 1;
}

.league-details__sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--safe-top);
  transform: translateY(var(--enter-y));
  transition: transform var(--duration) var(--easing);
}

/* --- Bar -------------------------------------------------------------------- */

/* The app bar (app-bar.css) with this page's spacing above it — see the club
   page's bar for the arrangement. */
.league-details__bar {
  flex: none;
  margin-top: var(--space-4);
}

/* --- Follow --------------------------------------------------------------- */

/*
 * The club page's bell, on a competition instead of a club — same chip, same
 * treatment, same reasoning. Following fills the glyph and tints its chip;
 * --accent-soft is the token tokens.css reserves for exactly this, and the
 * accent is what "this one is active" means everywhere else in the app.
 *
 * The two pages stack in one session — this one opens from that one — so the
 * control that follows a club and the control that follows the competition it
 * plays in have to be the same control, not two that merely rhyme.
 */
.league-details__follow {
  transition:
    background-color var(--duration) var(--easing),
    color var(--duration) var(--easing);
}

/* Inside the app bar the chip's fill and border are already stripped; this is
   the one state that earns the fill back. */
.league-details__follow[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- Body --------------------------------------------------------------- */

.league-details__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 var(--space-6);
}

/* --- Identity ------------------------------------------------------------- */

.league-identity {
  --badge-size: 48px;

  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
}

.league-identity__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  height: var(--badge-size);
}

.league-identity__badge .logo {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.league-identity__badge .logo:not(.logo--monogram) {
  background: none;
  border-radius: 0;
}

.league-identity__badge .logo--monogram {
  width: var(--badge-size);
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
}

.league-identity__text {
  min-width: 0;
}

.league-identity__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-wrap: balance;
}

.league-identity__region {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.league-identity__region[hidden] {
  display: none;
}

.league-identity__flag {
  flex: none;
  display: flex;
}

.league-identity__flag[hidden] {
  display: none;
}

/* --- Panels --------------------------------------------------------------- */

/*
 * Nothing here: every tab has a real panel now, and each carries its own
 * `[hidden]` / `[data-open="false"]` cross-fade rules — see
 * league-overview.css, club-table.css, club-matches.css, league-stats.css,
 * club-transfers.css and club-news.css. The empty placeholder this page was
 * scaffolded with, and the rules that styled it, are gone with the last of
 * them.
 */

/* --- Page behind ------------------------------------------------------------ */

body[data-league-open] {
  overflow: hidden;
}