:where(.auth-social-list,.auth-block) {align-items:center; display:flex; flex-wrap:wrap; gap:4px; justify-content:center;}
:where(.register-social-list, .social-accounts) {align-items:center; display:flex; flex-wrap:wrap; gap:8px;}
:where(.auth-social-list.inline-social-list) {justify-content:start; display: inline-flex; vertical-align: middle}
:where(.login-with) {position:relative; width:var(--lw-icon-size, 30px); height:var(--lw-icon-size, 30px); display:block; background-color:var(--lw-icon-bg-color, silver); border-radius:var(--lw-icon-radius, 30px); transition: background-color .2s ease-in, scale .1s ease-in;}
:where(.login-with i) {width:100%; height:100%; border-radius:var(--lw-icon-radius, 30px); display:block; background-color:var(--lw-icon-color, #ffffff); pointer-events:none; -webkit-mask:var(--lw-icon) center / contain no-repeat; mask:var(--lw-icon) center / contain no-repeat;}

/* Определение цветов для каждой социальной сети */
:where(.login-with.local) {--lw-icon-bg-color:#5E5E5E; --lw-icon:url("/.s/img/icon/social/login/local.svg");}
:where(.login-with.uid) {--lw-icon-bg-color:#498bfa; --lw-icon:url("/.s/img/icon/social/login/uid.svg");}
:where(.login-with.telegram) {--lw-icon-bg-color:#2aabee; --lw-icon:url("/.s/img/icon/social/login/tg.svg");}
:where(.login-with.vkontakte) {--lw-icon-bg-color:#0077ff; --lw-icon:url("/.s/img/icon/social/login/vk.svg");}
:where(.login-with.yandex) {--lw-icon-bg-color:#fc3f1d; --lw-icon:url("/.s/img/icon/social/login/ya.svg");}
:where(.login-with.facebook) {--lw-icon-bg-color:#1877F2; --lw-icon:url("/.s/img/icon/social/login/fb.svg");}
:where(.login-with.google) {--lw-icon-bg-color:#f8f8fc; border: 1px solid #c4c4c4}
:where(.login-with.google i) {background:url("/.s/img/icon/social/login/google.svg") center center/contain no-repeat;}
:where(.login-with.ok) {--lw-icon-bg-color:#ff7700; --lw-icon:url("/.s/img/icon/social/login/ok.svg");}

/* Для тумблеров в комментариях - более тусклые цвета */
:where(.auth-comments-toggles .login-with:not(.active,.google,.local)){background-color:color-mix(in srgb, var(--lw-icon-bg-color) 70%, white 50%);}
:where(.auth-comments-toggles .login-with.google:not(.active)){filter: grayscale(1) opacity(.1)}

.login-with:not(.auth-comments-toggles .login-with) {
    background-color: var(--lw-icon-bg-color, silver);
}

/*social connect loader*/
:where(.login-with.wait) {--lw-icon:url("/.s/img/icon/social/login/loader.svg"); pointer-events: none;background-color:color-mix(in srgb, var(--lw-icon-bg-color) 60%, white 40%)}
:where(.login-with.wait i) {transform-origin:center center;animation: login-with-wait 2s linear infinite; background-image: none;}
:where(.login-with.google.wait i) {background-color:color-mix(in srgb, #c4c4c4 60%, white 40%); -webkit-mask:var(--lw-icon) center / contain no-repeat; mask:var(--lw-icon) center / contain no-repeat;}
@keyframes login-with-wait { 0% { transform:rotate(0deg); } 100% { transform: rotate(360deg);}}

@media (hover: hover) {
    :where(.login-with:not(.auth-comments-toggles .login-with)):hover {scale:1.2;}
    
    /* Для цветных кнопок при hover */
    .login-with:not(.auth-comments-toggles .login-with):is(.uid,.vkontakte,.yandex,.facebook,.ok,.telegram):hover {
        background-color:color-mix(in srgb, var(--lw-icon-bg-color) 70%, white 0%);
    }
    
    /* Для local при hover - меняем переменную, цвет применится автоматически */
    .login-with:not(.auth-comments-toggles .login-with).local:hover {
        --lw-icon-bg-color:#a5a5a5;
    }
    
    /* Для google при hover */
    .login-with:not(.auth-comments-toggles .login-with).google:hover {
        --lw-icon-bg-color:#eeeeee;
        border: 1px solid #a5a5a5;
    }
}