/* ===== Avatar Component ===== */

.ui-avatar-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--avatar-background, var(--meb-surface-avatar, var(--meb-surface-card)));
    border: 1px solid var(--avatar-border, var(--meb-border-avatar, var(--meb-border-subtle)));
    cursor: pointer;
    transition: all 120ms ease;
}

/* --- Sizes --- */

.ui-avatar-wrapper.size-sm {
    width: 32px;
    height: 32px;
}

.ui-avatar-wrapper.size-md {
    width: 48px;
    height: 48px;
}

.ui-avatar-wrapper.size-lg {
    width: 80px;
    height: 80px;
}

/* --- Content --- */

.ui-avatar-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-avatar-content svg {
    width: 70%;
    height: 70%;
    fill: var(--avatar-foreground, var(--meb-text-avatar, var(--meb-text-default)));
}

/* --- Text fallback --- */

.avatar-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--avatar-foreground, var(--meb-text-avatar, var(--meb-text-default)));
    user-select: none;
}

/* --- Hover --- */
/* State token: CSS fallback only (not wired through ComponentStyles yet) */

.ui-avatar-wrapper:hover {
    box-shadow: 0 0 0 3px var(--avatar-hover, var(--meb-button-primary-focus-shadow));
}

/* --- Selected --- */
/* State tokens: CSS fallback only (not wired through ComponentStyles yet) */

.ui-avatar-wrapper.selected {
    border-color: var(--avatar-selected-border, var(--meb-border-accent));
    box-shadow: 0 0 0 3px var(--avatar-selected-ring, var(--meb-button-primary-focus-shadow));
}

/* --- Variant: Default --- */

.ui-avatar-wrapper.variant-default {
    background: var(--avatar-background, var(--meb-surface-avatar, var(--meb-surface-card)));
}

/* --- Variant: Subtle --- */

.ui-avatar-wrapper.variant-subtle {
    background: var(--avatar-background, var(--meb-surface-avatar-subtle, var(--meb-surface-avatar)));
    border: none;
}

/* --- Variant: Outlined --- */

.ui-avatar-wrapper.variant-outlined {
    background: transparent;
    border: 2px solid var(--avatar-border, var(--meb-border-avatar, var(--meb-border-subtle)));
}

/* --- Disabled state --- */

.ui-avatar-wrapper.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.ui-avatar-wrapper.disabled .avatar-text {
    color: var(--avatar-text-disabled, var(--meb-text-muted));
}