/* Avatars, profile picker, team roster and activity feed. */
@layer components {
  [data-theme] {
    .avatar {
      display: inline-grid;
      flex: none;
      place-items: center;
      width: var(--avatar-size, 2.5rem);
      height: var(--avatar-size, 2.5rem);
      border-radius: var(--radius-full);
      background: var(--avatar-bg, var(--color-brand-soft));
      color: var(--avatar-fg, var(--color-brand-strong));
      font-family: var(--font-display);
      font-size: calc(var(--avatar-size, 2.5rem) * 0.45);
      font-style: normal;
      font-weight: var(--weight-display);
      line-height: 1;
      text-transform: uppercase;
    }

    .avatar--accent {
      --avatar-bg: var(--color-accent);
      --avatar-fg: var(--color-on-accent);
    }

    .avatar--reward {
      --avatar-bg: var(--color-reward);
      --avatar-fg: var(--color-on-reward);
    }

    .avatar--practice {
      --avatar-bg: var(--color-practice-soft);
      --avatar-fg: var(--color-practice);
    }

    .player-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-full);
      background: var(--color-surface);
      font-weight: var(--weight-strong);
      line-height: 1.2;

      .avatar {
        --avatar-size: 2rem;
      }
    }

    /*
     * Initial drawn from data-avatar, for places where the element's text must stay the name
     * alone: <li class="player-chip" data-avatar="L" data-tone="0">Léo</li>
     */
    [data-avatar]::before {
      content: attr(data-avatar);
      display: inline-grid;
      flex: none;
      place-items: center;
      width: var(--avatar-size, 2rem);
      height: var(--avatar-size, 2rem);
      border-radius: var(--radius-full);
      background: var(--color-accent);
      color: var(--color-on-accent);
      font-family: var(--font-display);
      font-size: calc(var(--avatar-size, 2rem) * 0.45);
      font-weight: var(--weight-display);
      line-height: 1;
      text-transform: uppercase;
    }

    [data-avatar][data-tone="1"]::before {
      background: var(--color-reward);
      color: var(--color-on-reward);
    }

    [data-avatar][data-tone="2"]::before {
      background: var(--color-practice-soft);
      color: var(--color-practice);
    }

    .profile-tile[data-avatar] {
      --avatar-size: 4.5rem;
    }

    .roster {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      padding: 0;
      list-style: none;
    }

    .profile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
      gap: var(--space-4);
      padding: 0;
      list-style: none;
    }

    .profile-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      width: 100%;
      margin: 0 0 var(--button-edge);
      padding: var(--space-5) var(--space-3);
      border: var(--border-width) solid var(--color-border-strong);
      border-radius: var(--radius-card);
      background: var(--color-surface);
      box-shadow: 0 var(--button-edge) 0 var(--color-border-strong);
      color: var(--color-text);
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: var(--weight-display);
      cursor: pointer;
      transition: transform var(--duration-fast) var(--press-ease), box-shadow var(--duration-fast) var(--press-ease);

      .avatar {
        --avatar-size: 4.5rem;
      }

      &:hover {
        border-color: var(--color-brand);
      }

      &:active {
        transform: translateY(var(--button-edge));
        box-shadow: none;
      }
    }

    .feed {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: 0;
      list-style: none;
    }

    .feed__item {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-1) var(--space-3);
      padding: var(--space-3) var(--space-4);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-control);
      background: var(--color-surface);

      .avatar {
        grid-row: span 2;
      }

      :where(p) {
        font-size: var(--text-md);
        line-height: var(--leading-snug);
      }
    }

    /* A coach-awarded achievement stands out from ordinary practice news. */
    .feed__item--award {
      border-color: var(--color-reward-strong);
      background: var(--color-reward-soft);
    }
  }
}