.avatar {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    background-color: var(--gray-200);
    cursor: pointer;
    z-index: 1;
    position: relative;
    &-large {
        width: 48px;
        height: 48px;
        border: 2px solid var(--background-neutral-container);
    }
    &-medium {
        width: 32px;
        height: 32px;
        border: 1px solid var(--border-neutral-subtle);
    }
    &-small {
        width: 24px;
        height: 24px;
        border: 1px solid var(--border-neutral-subtle);
    }
}

.avatarContainer,
.AvatarGroup {
    .avatar:not(:first-child) {
        margin-left: calc(var(--size-200) - var(--size-400));
    }
}