/* =========================================================
   PAREACLUB SOCIAL BUTTONS V2
========================================================= */

#usersListUI .user-item {
    display:
        flex;

    align-items:
        center;

    gap:
        4px;
}


#usersListUI .user-name {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


#usersListUI
.parea-social-actions {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        3px;

    flex:
        0 0 auto;

    margin-left:
        auto;
}


#usersListUI
.parea-social-btn {

    flex:
        0 0 auto;

    min-height:
        23px;

    padding:
        3px 5px;

    border:
        1px solid #3c718f;

    border-radius:
        5px;

    background:
        linear-gradient(
            #17304a,
            #081521
        );

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;
}


#usersListUI
.parea-social-btn:not(:disabled):hover {

    filter:
        brightness(1.25);
}


#usersListUI
.parea-friend-add {

    border-color:
        #28a968;
}


#usersListUI
.parea-friend-ok {

    border-color:
        #667789;

    opacity:
        .72;

    cursor:
        default;
}


#usersListUI
.parea-friend-remove {

    border-color:
        #dc9342;
}


#usersListUI
.parea-block-add {

    border-color:
        #dc4b4b;
}


#usersListUI
.parea-blocked-ok {

    border-color:
        #c53636;

    opacity:
        .78;

    cursor:
        default;
}


#usersListUI
.parea-block-remove {

    border-color:
        #27a969;
}


@media screen and (max-width:650px) {

    #usersListUI
    .parea-social-btn {

        padding:
            3px 4px;

        font-size:
            8px;
    }


    #usersListUI
    .parea-social-actions {

        gap:
            2px;
    }
}