@layer components {
    /* An avatar is always a circle, for a person or an account; an icon
       on a rounded square is a tile. Without a photo it is the grey
       monogram of a contact; `background("tint")` colours it with the app's
       accent instead. One size token drives the whole
       avatar: the initials are 40% of it and an icon 60%, so every size has
       the same proportions. The sizes step evenly, 0.75rem apart. */
    .avatar {
        --avatar-size: 2.5rem;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        inline-size: var(--avatar-size);
        block-size: var(--avatar-size);
        overflow: hidden;
        border-radius: 50%;
        background-image: linear-gradient(
            oklch(from var(--system-background) 72% c h),
            oklch(from var(--system-background) 58% c h)
        );
        color: oklch(100% 0% 0deg);
    }

    .avatar--size-small {
        --avatar-size: 1.75rem;
    }

    .avatar--size-normal {
        --avatar-size: 2.5rem;
    }

    .avatar--size-large {
        --avatar-size: 3.25rem;
    }

    .avatar__initials {
        font-size: calc(var(--avatar-size) * 0.4);
        font-weight: 600;
        line-height: 1;

        & svg {
            inline-size: calc(var(--avatar-size) * 0.6);
            block-size: calc(var(--avatar-size) * 0.6);
        }
    }

    .avatar__image {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    @container style(--density: compact) {
        :root .avatar:not(.avatar--size-small, .avatar--size-large) {
            --avatar-size: 2rem;
        }
    }
}