.aw-avatar {
    display: inline-grid;
    vertical-align: middle;

    flex-shrink: 0;
    overflow: hidden;
    contain: content;
    user-select: none;
    text-transform: uppercase;

    width: var(--ui-avatar-size, 2.25rem);
    height: var(--ui-avatar-size, 2.25rem);
    min-width: var(--ui-avatar-size, 2.25rem);
    min-height: var(--ui-avatar-size, 2.25rem);
    border-radius: var(--ui-avatar-size, 2.25rem);

    &--square {
        border-radius: 20%;

        &.aw-avatar > * {
            border-radius: 20%;
        }
    }

    & > * {
        grid-row: 1 / -1;
        grid-column: 1 / -1;

        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;
        border-radius: var(--ui-avatar-size, 2.25rem);
    }

    & > :not(img):not(&__no-img-icon) {
        text-align: center;
        font-size: var(--ui-avatar-font-size);
        line-height: var(--ui-avatar-size);
    }

    &__no-img-icon {
        background-color: var(--c-text-on-overlay);
        fill: var(--c-mono-400);
    }

    &__loader {
        @apply border-info;
        background: rgba(255, 255, 255, 0.5);

        margin: -1px;
        width: calc(100% + 2px);
        height: calc(100% + 2px);

        border-width: var(
            --ui-loading-width,
            calc(var(--ui-avatar-size, 2.25rem) / 16)
        );
        border-right-color: var(--c-transparent);
        backdrop-filter: blur(1px);

        animation: 1s aw-rotate linear infinite;
        will-change: transform;
    }
}