.users-stats {
    &-header {
        @extend .d-flex, .gap-2;

        h5 {
            @extend .d-flex, .align-center, .gap-2;
        }
    }

    &-icon {
        @extend .flex-center, .h5;

        background-color: var(--transp-1);
        width: 32px;
        height: 32px;
        border-radius: var(--border05);
        font-size: var(--h5);
    }

    &-empty {
        @extend .flex-center, .h2;
        color: var(--text-600);
    }

    &-avatar-mode {
        @extend .d-flex, .flex-wrap, .gap-2;
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            opacity: .7;
            transition: opacity .2s ease-in-out;
            
            &:hover {
                opacity: 1;
            }
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    &-compact-mode {
        @extend .d-flex, .flex-wrap;
        gap: 4px;
        
        .user-avatar-compact {
            width: 30px;
            height: 30px;
            border-radius: 3px;
            overflow: hidden;
            opacity: .8;
            transition: all .2s ease-in-out;
            
            &:hover {
                opacity: 1;
            }
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}