.ui-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    overflow: hidden;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.ui-avatar--small {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
}

.ui-avatar--large {
    width: 54px;
    height: 54px;
    font-size: 1rem;
    box-shadow: 0 0 0 4px var(--primary-50);
}

.ui-avatar--xlarge {
    width: 72px;
    height: 72px;
    font-size: 1.2rem;
    box-shadow: 0 0 0 4px var(--primary-50);
}

.ui-avatar--xxlarge {
    width: 88px;
    height: 88px;
    font-size: 1.35rem;
    box-shadow: 0 0 0 4px var(--primary-50);
}

.ui-avatar--image {
    background: var(--surface-alt);
}

.ui-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-avatar__fallback {
    line-height: 1;
}