@layer components {
    .avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--touch-target);
        height: var(--touch-target);
        border-radius: var(--radius-round);
        font-weight: 600;
        font-size: var(--size-small);
        letter-spacing: 0.02em;
    }

    .avatar-s {
        width: 28px;
        height: 28px;
        font-size: var(--size-micro);
    }

    .avatar-tone-sky {
        background: var(--sky-tint);
        color: var(--sky-deep);
    }

    .avatar-tone-wheat {
        background: var(--wheat-tint);
        color: var(--soil);
    }

    .avatar-tone-moss {
        background: var(--moss-tint);
        color: var(--moss);
    }

    .avatar-tone-haze {
        background: var(--haze);
        color: var(--soil-2);
    }

    .avatar-team {
        background: var(--soil);
        color: var(--wheat);
        box-shadow: 0 0 0 2px var(--wheat);
    }

    .avatar .icon {
        width: 20px;
        height: 20px;
    }

    .avatar-s .icon {
        width: 14px;
        height: 14px;
    }
}