/*
 * Kids: .topbar (wordmark + selected player) and .tabbar (path / badges / team), which sits at
 * the bottom of the screen on phones and moves next to the content from 40rem.
 * Backoffice: .appbar, one row of links that scrolls sideways on phones.
 */
@layer components {
  [data-theme] {
    .wordmark {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      color: var(--color-brand);
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: var(--weight-display);
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;

      .icon {
        --icon-size: 1.4em;
      }
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-bottom: var(--border-width) solid var(--color-border);
      background: var(--color-surface);
    }

    .tabbar {
      position: fixed;
      inset: auto 0 0;
      z-index: var(--z-nav);
      display: grid;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
      gap: var(--space-1);
      padding: var(--space-2) var(--space-2) max(var(--space-2), env(safe-area-inset-bottom));
      border-top: var(--border-width) solid var(--color-border);
      background: var(--color-surface);

      @media (min-width: 40rem) {
        position: static;
        display: inline-flex;
        padding: var(--space-1);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-full);
      }
    }

    .tabbar__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-1);
      min-height: 3.5rem;
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-lg);
      color: var(--color-text-muted);
      font-family: var(--font-display);
      font-size: var(--text-sm);
      font-weight: var(--weight-display);
      line-height: 1.1;
      text-align: center;
      text-decoration: none;

      .icon {
        --icon-size: 1.6rem;
      }

      &:hover {
        background: var(--color-surface-sunken);
        color: var(--color-text);
      }

      &[aria-current="page"] {
        background: var(--color-brand-soft);
        color: var(--color-brand-strong);
      }

      @media (min-width: 40rem) {
        flex-direction: row;
        gap: var(--space-2);
        min-height: var(--control-height-sm);
        padding-inline: var(--space-4);
        border-radius: var(--radius-full);
        font-size: var(--text-md);

        .icon {
          --icon-size: 1.25rem;
        }
      }
    }

    .appbar {
      display: flex;
      flex-direction: column;
      border-bottom: var(--border-width) solid var(--color-border);
      background: var(--color-surface);

      @media (min-width: 40rem) {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
        padding-inline: var(--space-4);
      }
    }

    .appbar__brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: var(--space-2) var(--space-4);

      @media (min-width: 40rem) {
        padding-inline: 0;
      }
    }

    .appbar__links {
      display: flex;
      flex: 1;
      align-items: center;
      padding-inline: var(--space-2);
      overflow-x: auto;
      scrollbar-width: none;

      @media (min-width: 40rem) {
        padding-inline: 0;
      }
    }

    .appbar__link {
      display: inline-flex;
      align-items: center;
      min-height: var(--control-height);
      padding-inline: var(--space-3);
      border-bottom: 2px solid transparent;
      color: var(--color-text-muted);
      font-weight: var(--weight-strong);
      text-decoration: none;
      white-space: nowrap;

      &:hover {
        color: var(--color-text);
      }

      &[aria-current="page"] {
        border-bottom-color: var(--color-brand);
        color: var(--color-text);
      }
    }

    .appbar__link--button {
      border: 0;
      border-bottom: 2px solid transparent;
      background: none;
      font: inherit;
      font-weight: var(--weight-strong);
      cursor: pointer;

      @media (min-width: 40rem) {
        margin-inline-start: auto;
      }
    }

    .appbar__links > form.button_to {
      display: flex;

      @media (min-width: 40rem) {
        margin-inline-start: auto;
      }
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      min-height: var(--control-height-sm);

      .icon {
        --icon-size: 1em;
        transform: scaleX(-1);
        vertical-align: 0;
      }
    }
  }
}