.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-10);
    height: var(--spacing-10);
    background: var(--gradient-primary);
    color: var(--white);
    font-weight: var(--font-bold);
    border-radius: var(--rounded-full);
    flex-shrink: 0;
    font-size: var(--text-sm);

    &-xs {
        width: var(--spacing-6);
        height: var(--spacing-6);
        font-size: var(--text-xs);
    }

    &-sm {
        width: var(--spacing-8);
        height: var(--spacing-8);
        font-size: var(--text-xs);
    }

    &-lg {
        width: var(--spacing-12);
        height: var(--spacing-12);
        font-size: var(--text-base);
    }
}