/* ===== AvatarGroup Component ===== */

.ui-avatar-group {
    display: flex;
    align-items: center;
}

/* --- Overlap stacking --- */

.avatar-stack {
    position: relative;
    margin-left: -12px;
    z-index: 1;
}

/* First avatar should not shift */
.avatar-stack:first-child {
    margin-left: 0;
}

/* Bring hovered avatar forward */
.avatar-stack:hover {
    z-index: 10;
}

/* --- Border separation between overlapping avatars --- */

.ui-avatar-group .ui-avatar-wrapper {
    border: 2px solid var(--meb-border-inverse);
}

/* --- Overflow (+N) styling --- */

.avatar-stack.overflow .ui-avatar-wrapper {
    background: var(--avatar-background, var(--meb-surface-avatar-subtle, var(--meb-surface-avatar)));
    border: 2px solid var(--meb-border-inverse);
}