.o-ui-avatar {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: var(--o-ui-br-circular);
    overflow: hidden;
}

/* SIZES */
.o-ui-avatar-2xs {
    width: var(--o-ui-sz-3);
    height: var(--o-ui-sz-3);
}

.o-ui-avatar-xs {
    width: var(--o-ui-sz-4);
    height: var(--o-ui-sz-4);
}

.o-ui-avatar-sm {
    width: var(--o-ui-sz-5);
    height: var(--o-ui-sz-5);
}

.o-ui-avatar-md {
    width: var(--o-ui-sz-6);
    height: var(--o-ui-sz-6);
}

.o-ui-avatar-lg {
    width: var(--o-ui-sz-7);
    height: var(--o-ui-sz-7);
}

.o-ui-avatar-xl {
    width: var(--o-ui-sz-8);
    height: var(--o-ui-sz-8);
}

.o-ui-avatar-2xl {
    width: var(--o-ui-sz-9);
    height: var(--o-ui-sz-9);
}

/* IMAGE */
.o-ui-avatar-image {
    width: 100%;
    height: 100%;
}

/* TEXT */
.o-ui-avatar-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--o-ui-white);
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background-color var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
}

/* GROUPS */
.o-ui-avatar-group {
    display: inline-flex;
    align-items: center;
}

/* GROUPS | REMAININGS */
.o-ui-avatar-group-remainings {
    background-color: var(--o-ui-bg-alias-mid-break);
}

.o-ui-avatar-group-remainings .o-ui-avatar-text {
    color: var(--o-ui-text-alias-secondary);
}

/* GROUPS | REMAININGS | TOOLTIP */
.o-ui-avatar-group-remainings-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.o-ui-avatar-group-remainings-list-item {
    display: flex;
    align-items: center;
}

.o-ui-avatar-group-remainings-list-item:not(:last-child) {
    margin-bottom: var(--o-ui-sp-2);
}

.o-ui-avatar-group-remainings-list-item-avatar {
    margin-right: var(--o-ui-sp-2);
}