/**
 * Avatar Component - CSS
 * Source: src/components/Atoms/Avatar/Avatar.tsx
 * Last synced: 2026-04 (ui-core v2.0.76)
 *
 * React sizes: sm=40px, md=48px, lg=56px
 * Fallback: theme --uicore-muted / --uicore-muted-foreground
 */

@import url("../tokens.63d170f1374b.css");

.ui-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ui-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--uicore-muted);
    color: var(--uicore-muted-foreground);
    font-family: var(--font-spline, "Spline Sans", sans-serif);
    font-weight: 500;
    user-select: none;
}

.ui-avatar.sm { width: 40px; height: 40px; font-size: 14px; }
.ui-avatar.md { width: 48px; height: 48px; font-size: 16px; }
.ui-avatar.lg { width: 56px; height: 56px; font-size: 18px; }

.ui-avatar.xs { width: 24px; height: 24px; font-size: 10px; }
.ui-avatar.xl { width: 64px; height: 64px; font-size: 20px; }

.ui-avatar img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}