/* avatar */
@layer components {
  .avatar {
    --avatar-tint-1: oklch(0.55 0.15 20);
    --avatar-lg: 3.25rem;
    --size: var(--space-5);
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-fill), var(--avatar-tint-1));
    color: var(--accent-ink);
    font-size: calc(var(--size) * 0.38);
    font-weight: var(--weight-semibold);
    box-shadow: 0 0 0 var(--border-width-strong) var(--surface-2);

    img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    &.avatar--sm { --size: var(--space-4); }
    &.avatar--lg { --size: var(--avatar-lg); }
  }

  .avatar-group {
    --avatar-tint-2: oklch(0.5 0.15 290);
    --avatar-tint-3: oklch(0.5 0.12 190);
    display: flex;
    .avatar + .avatar { margin-inline-start: calc(var(--size) * -0.3); }
    .avatar:nth-child(2) { background: linear-gradient(135deg, var(--info), var(--avatar-tint-2)); }
    .avatar:nth-child(3) { background: linear-gradient(135deg, var(--success), var(--avatar-tint-3)); }
    .avatar:nth-child(4) { background: var(--surface-sunken); color: var(--ink-2); }
  }
}