/* ================================================================
   AVATAR COMPONENT
   3 variants × 6 sizes + status + group
   Budget: < 3KB minified
   ================================================================ */

/* ── BASE ────────────────────────────────────────────────────── */

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--avatar-radius);
    overflow: hidden;
    flex-shrink: 0;
    vertical-align: middle;
    font-weight: var(--weight-semibold);
    color: #fff;
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
}

/* ── SIZES ───────────────────────────────────────────────────── */

.avatar--xs  { width: var(--avatar-size-xs);  height: var(--avatar-size-xs);  font-size: 10px; }
.avatar--sm  { width: var(--avatar-size-sm);  height: var(--avatar-size-sm);  font-size: 12px; }
.avatar--md  { width: var(--avatar-size-md);  height: var(--avatar-size-md);  font-size: 14px; }
.avatar--lg  { width: var(--avatar-size-lg);  height: var(--avatar-size-lg);  font-size: 16px; }
.avatar--xl  { width: var(--avatar-size-xl);  height: var(--avatar-size-xl);  font-size: 22px; }
.avatar--2xl { width: var(--avatar-size-2xl); height: var(--avatar-size-2xl); font-size: 32px; }

/* ── IMAGE VARIANT ───────────────────────────────────────────── */

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── INITIALS VARIANT ────────────────────────────────────────── */

.avatar--initials {
    background: var(--accent-primary);
}
.avatar--initials[data-color="1"] { background: #4F46E5; }
.avatar--initials[data-color="2"] { background: #DB2777; }
.avatar--initials[data-color="3"] { background: #059669; }
.avatar--initials[data-color="4"] { background: #D97706; }
.avatar--initials[data-color="5"] { background: #7C3AED; }

/* ── ICON VARIANT ────────────────────────────────────────────── */

.avatar--icon {
    background: var(--avatar-bg-fallback);
    color: var(--text-tertiary);
}
.avatar--icon svg {
    width: 50%;
    height: 50%;
}

/* ── MODIFIERS ───────────────────────────────────────────────── */

.avatar--interactive {
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.avatar--interactive:hover {
    transform: scale(1.08);
}
.avatar--interactive:active {
    transform: scale(1);
}
.avatar--interactive:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.avatar--bordered {
    box-shadow: 0 0 0 2px var(--bg-canvas);
}

.avatar--square {
    border-radius: var(--avatar-radius-square);
}
.avatar--square .avatar__status {
    border-radius: var(--radius-sm);
}

/* ── STATUS INDICATOR ────────────────────────────────────────── */

.avatar__status {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    border: 2px solid var(--bg-canvas);
}

/* Status sizes scale with avatar size */
.avatar--xs .avatar__status,
.avatar--sm .avatar__status { width: var(--avatar-status-size-sm); height: var(--avatar-status-size-sm); }
.avatar--md .avatar__status,
.avatar--lg .avatar__status { width: var(--avatar-status-size-md); height: var(--avatar-status-size-md); }
.avatar--xl .avatar__status,
.avatar--2xl .avatar__status { width: var(--avatar-status-size-lg); height: var(--avatar-status-size-lg); }

.avatar__status--online  { background: var(--avatar-status-online); }
.avatar__status--away    { background: var(--avatar-status-away); }
.avatar__status--busy    { background: var(--avatar-status-busy); }
.avatar__status--offline { background: var(--avatar-status-offline); }

/* ── AVATAR GROUP ────────────────────────────────────────────── */

.avatar-group {
    display: inline-flex;
    align-items: center;
}
.avatar-group .avatar + .avatar {
    margin-left: var(--avatar-overlap);
}