@layer components {
/* Avatar — circular profile indicator. Figma node 1959:23692.
   Render modes are picked by the partial:

     person initials   <span class="psw-avatar psw-avatar--md"
                              style="background-color: <bg>; color: <text>;">AB</span>
     image             <img  class="psw-avatar psw-avatar--md" src="…" alt="…">
     item icon         <span class="psw-avatar psw-avatar--item psw-avatar--icon psw-avatar--md">…</span>
     subaccount icon   <span class="psw-avatar psw-avatar--subaccount psw-avatar--icon psw-avatar--md">…</span>

   Background/text colors are inline on the <span> so callers can pass
   per-user values (e.g. UserFactory.initials_colors(user.id)). When omitted,
   the partial falls back to Figma's default purple. */

.psw-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-max);
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    text-align: center;
    /* default colors — overridden by inline style when the partial passes
       bg_color/text_color through. */
    background-color: var(--color-violet-100);
    color: var(--color-violet-400);
    /* applies to img mode; ignored for <span> */
    object-fit: cover;
}

/* --- sizes -------------------------------------------------------------- */
/* Figma: 24 / 36 / 48 / 80 / 116 px diameters. Person initials type ramp:
   Label/X Small (sm), Label/Medium (md), Heading/X Small (lg),
   Heading/X Large (xl), Display/Medium (xxl). */

.psw-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: var(--text-label-xs);
    line-height: var(--text-label-xs--line-height);
}
.psw-avatar--md {
    width: 36px;
    height: 36px;
    font-size: var(--text-label-md);
    line-height: var(--text-label-md--line-height);
}
.psw-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: var(--text-heading-xs);
    line-height: var(--text-heading-xs--line-height);
}
.psw-avatar--xl {
    width: 80px;
    height: 80px;
    font-size: var(--text-heading-xl);
    line-height: var(--text-heading-xl--line-height);
}
.psw-avatar--xxl {
    width: 116px;
    height: 116px;
    font-size: var(--text-display-md);
    line-height: var(--text-display-md--line-height);
}

/* --- semantic subtypes -------------------------------------------------- */

/* Item / subaccount icon avatars: static entity treatment (Gray 200 circle +
   Gray 600 glyph) regardless of the Pro's primary/secondary theme color. */
.psw-avatar--icon {
    color: var(--color-gray-600);
    background: var(--color-gray-200);
}

.psw-avatar--icon .psw-icon {
    color: currentColor;
}

/* Generic icon tile (avatar_type="icon"): a neutral circle around an arbitrary
   widget icon. Colors come inline from the partial (gray by default). The glyph
   keeps the size psw-icon gives it — the partial loads the asset that matches
   the circle (16 / 20 / 24 / 40 / 56 px), so it renders 1:1 and its stroke
   stays true. Sizing it as a fraction of the circle instead would re-scale the
   asset, and would thin further inside a ringed avatar, whose content box is
   the circle minus the ring (the avatar banner's 48px top-left circle carries a
   2px white ring, so half of it is 22px, not the asset's 24px). */
.psw-avatar--icon-tile .psw-icon {
    color: currentColor;
}
}