/* An <img> (or the initials SVG) served from /users/:id/avatar.
   --avatar-size comes from _global.css; the modifiers re-point it locally. */

@layer components {
  .avatar {
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    border-radius: 50%;
    flex: none;
    display: inline-block;
    object-fit: cover;
    background: var(--color-surface-sunken);

    &.avatar--sm {
      --avatar-size: 1.875rem;
    }

    &.avatar--lg {
      --avatar-size: 3.5rem;
    }
  }
}