: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(.auth-modal > .auth-social-list) {padding-block:1rem}
:where(.login-with) {display:block; height:var(--lw-icon-size, 30px); position:relative; width:var(--lw-icon-size, 30px);}
:where(.login-with):before {background-color:var(--lw-icon-bg-color, #000000); content:""; display:block; height:var(--lw-icon-size, 30px); -webkit-mask:url("/.s/img/icon/social/login/square-bg.svg") center / contain no-repeat; mask:url("/.s/img/icon/social/login/square-bg.svg") center / contain no-repeat; position:absolute; width:var(--lw-icon-size, 30px); transition:background-color .2s ease-in;}
:where(.login-with i) {background-color:var(--lw-icon-color, #ffffff); display:block; height:100%; pointer-events:none; transition:background-color .2s ease-in; width:100%; -webkit-mask:var(--lw-icon) center / contain no-repeat; mask:var(--lw-icon) center / contain no-repeat;}

:where(.login-with.local) {--lw-active-color:#5e5e5e;--lw-icon:url("/.s/img/icon/social/login/local.svg")}
:where(.login-with.uid) {--lw-active-color:#498bfa;--lw-icon:url("/.s/img/icon/social/login/uid.svg")}
:where(.login-with.telegram) {--lw-active-color:#229ED9;--lw-icon:url("/.s/img/icon/social/login/tg.svg")}
:where(.login-with.vkontakte) {--lw-active-color:#0077ff;--lw-icon:url("/.s/img/icon/social/login/vk.svg")}
:where(.login-with.yandex) {--lw-active-color:#fc3f1d;--lw-icon:url("/.s/img/icon/social/login/ya.svg")}
:where(.login-with.facebook) {--lw-active-color:#1877F2;--lw-icon:url("/.s/img/icon/social/login/fb.svg")}
:where(.login-with.google) {--lw-active-color:#5E5E5E;--lw-icon:url("/.s/img/icon/social/login/google.svg")}
:where(.login-with.ok) {--lw-active-color:#ff7700;--lw-icon:url("/.s/img/icon/social/login/ok.svg")}

:where(.login-with.active) {--lw-icon-bg-color:var(--lw-active-color)}

/*social connect loader*/
:where(.login-with.wait) {--lw-icon:url("/.s/img/icon/social/login/loader.svg"); pointer-events: none;}
:where(.login-with.wait i) {transform-origin:center center;animation: login-with-wait 2s linear infinite;}
@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) {--lw-icon-bg-color:var(--lw-active-color)}
}