@layer components {
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
  }

  .avatar--sm { inline-size: 2rem; block-size: 2rem; font-size: var(--text-xs); }
  .avatar--md { inline-size: 2.5rem; block-size: 2.5rem; font-size: var(--text-sm); }
  .avatar--lg { inline-size: 4rem; block-size: 4rem; font-size: var(--text-lg); }
  .avatar--xl { inline-size: 6rem; block-size: 6rem; font-size: var(--text-2xl); }

  .avatar--initials {
    background-color: var(--color-blue);
    color: white;
    font-weight: 600;
  }

  /* Clickable avatar for file upload */
  .avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-sm);
    cursor: pointer;
  }

  .avatar-upload:hover .avatar {
    opacity: 0.8;
  }

  .avatar-upload__hint {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }
}