/* User Avatar Component */
.user-avatar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    color: inherit;
}

.user-avatar__img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-avatar__default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.user-avatar__name {
    font-weight: 600;
    font-size: inherit;
}

.user-avatar:hover .user-avatar__name {
    color: var(--color-accent);
}

/* Avatar color palette */
.avatar-color-0 { background-color: #7c5cbf; }
.avatar-color-1 { background-color: #bf5c7c; }
.avatar-color-2 { background-color: #4a9e6e; }
.avatar-color-3 { background-color: #bf9a5c; }
.avatar-color-4 { background-color: #5c9abf; }
.avatar-color-5 { background-color: #9a5cbf; }
.avatar-color-6 { background-color: #4a8e8e; }
.avatar-color-7 { background-color: #bf6b5c; }

/* Sizes */
.user-avatar--lg .user-avatar__img,
.user-avatar--lg .user-avatar__default {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}