@layer components {
    .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        background: oklch(50% 50% var(--hue));
        color: oklch(100% 0% 0deg);
        overflow: hidden;
        flex-shrink: 0;
    }

    /* Circle for people; rounded square for an icon tile. */
    .avatar--shape-circle {
        border-radius: 50%;
    }

    .avatar--shape-rounded {
        border-radius: 0.625rem;
    }

    /* Normal size - for lists */
    .avatar--size-normal {
        width: 2.5rem;
        height: 2.5rem;
    }

    .avatar--size-normal .avatar__initials {
        font-size: 1rem;
        font-weight: 600;
    }

    .avatar--size-normal .avatar__initials svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Large size - for detail pages */
    .avatar--size-large {
        width: 5rem;
        height: 5rem;
    }

    .avatar--size-large .avatar__initials {
        font-size: 2rem;
        font-weight: 600;
    }

    .avatar--size-large .avatar__initials svg {
        width: 3rem;
        height: 3rem;
    }

    .avatar__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar__initials {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}