.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;

    &--xs { width: 1.25rem; height: 1.25rem; font-size: .625rem; }
    &--sm { width: 1.75rem; height: 1.75rem; font-size: .7rem; }
    &--md { width: 2.25rem; height: 2.25rem; font-size: .8rem; }
    &--lg { width: 3rem; height: 3rem; font-size: 1rem; }
    &--xl { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }

    &--circle { border-radius: 50%; }
    &--square { border-radius: var(--radius-md); }

    &__img { width: 100%; height: 100%; object-fit: cover; }
    &__initials { line-height: 1; }
    &__status {
        position: absolute;
        right: -2px; bottom: -2px;
        width: 25%; height: 25%;
        min-width: 8px; min-height: 8px;
        border: 2px solid var(--color-surface);
        border-radius: 50%;
        background: var(--color-text-muted);

        &--online  { background: var(--color-success); }
        &--away    { background: var(--color-warning); }
        &--offline { background: var(--color-text-muted); }
    }
}