/* скрываем все экраны */
.auth__screen {
    display: none;
}

/* показываем нужный экран */
.auth--screen-login > .auth__login {
    display: block;
}

.auth--screen-register > .auth__register {
    display: block;
}

.auth--screen-recover > .auth__recover {
    display: block;
}

/* хедер */
.auth {
    padding: 40px 35px 45px 35px;
    text-align: center;
    width: 100%;
}

.auth--screen-login .auth__sub-title:before {
    content: attr(data-login);
}

.auth--screen-recover .auth__sub-title:before {
    content: attr(data-recover);
}

.auth--screen-register .auth__sub-title:before {
    content: attr(data-register);
}

/* инпут */
.auth__label {
    position: relative;
    margin: 0 0 20px 0;
    display: block;
}

.auth__label:before {
    position: absolute;
    width: 30px;
    height: 44px;
    left: 0;
    top: 0;
    content: "";
    opacity: .5;
}

.auth__label--login:before {
    background: url(i/login.svg) no-repeat left 4px top 50% / 15px;
}

.auth__label--password:before {
    background: url(i/pass.svg) no-repeat left 4px top 50% / 14px;
}

.auth__label--phone:before {
    background: url(i/phone.svg) no-repeat left 4px top 50% / 17px;
}

.auth__label--focus:before {
    opacity: 1;
}

.auth__input {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #aaa;
    width: 100%;
    padding: 0 12px 0 35px;
    font: 600 21px/24px geometria, arial;
    height: 45px;
}

.auth__input:focus {
    border-color: #68C600;
}

.auth__label--sms-code {
    display: none;
    transition: max-height 250ms, opacity 250ms 250ms;
}

.auth--sms .auth__label--sms-code {
    max-height: 50px;
    display: block;
}

.auth__input--code {
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #fafafa;
    padding: 0 20px;
    text-align: center;
    font: 600 19px/24px geometria, arial;
    height: 40px;
}

.auth__input--code:focus {
    border-color: #68C600;
}

.auth__captcha {
    display: none;
    margin: 0 0 20px 0;
}

.auth__captcha--visible {
    display: flex;
}

.auth__label--captcha {
    flex-grow: 1;
    margin: 0 10px 0 0;
}

.auth__label--captcha:before {
    display: none;
}


.auth__captchaImg {
    flex-shrink: 0;
    width: 100px;
    height: 50px;
}

.auth__input--captcha {
    border: 1px solid #aaa;
    padding: 0;
    text-align: center;
    height: 50px;
    border-radius: 8px;
}


/* подсказка */
.auth__placeholder {
    position: absolute;
    color: #aaa;
    font: 18px/45px geometria, arial;
    top: 1px;
    left: 35px;
    cursor: text;
    transition: transform 250ms;
}

.auth__label--focus > .auth__placeholder {
    margin-top: -25px
}

@supports (transform: translateY(-18px)) {

    .auth__label--focus > .auth__placeholder {
        margin-top: 0;
    }

    .auth__label--focus > .auth__placeholder--login-phone {
        transform: translate(-10px, -25px) scale(.75);
    }

    .auth__label--focus > .auth__placeholder--password {
        transform: translate(-8px, -25px) scale(.75);
    }

    .auth__label--focus > .auth__placeholder--new-password {
        transform: translate(-15px, -25px) scale(.75);
    }

    .auth__label--focus > .auth__placeholder--login {
        transform: translate(-6px, -25px) scale(.75);
    }

    .auth__label--focus > .auth__placeholder--phone {
        transform: translate(-8px, -25px) scale(.75);
    }

    .auth__label--focus > .auth__placeholder--captcha {
        transform: translate(-8px, -24px) scale(.75);
    }

}

.auth__placeholder--captcha {
    top: 12px;
    left: 13px;
    padding: 0 5px;
    background: #fff;
    line-height: 25px;
}

/* hint */
.auth__hint {
    font: 12px/15px geometria, arial;
    margin: 5px 0 20px 0;
    color: #666;
}

.auth__hint--sms,
.auth__hint--repeat-sms {
    display: none;
}

.auth__hint--sms:after {
    content: attr(data-timer);
    font-weight: 700;
}

.auth--sms .auth__hint--sms {
    display: block;
}

.auth__hint--repeat-sms {
    cursor: pointer;
}

.auth__hint--repeat-sms:after {
    margin: 0 0 0 5px;
    content: attr(data-repeat);
    color: #06f;
    line-height: 12px;
    border-bottom: 1px dashed;
    display: inline-block;
    vertical-align: baseline;
}

.auth--repeat-sms .auth__hint--repeat-sms {
    display: block;
}

.auth--repeat-sms .auth__hint--sms {
    display: none;
}

/* кнопки входа, восстановления пароля, регистрации на сайте */
.auth__button {
    font: 14px/16px geometria, arial;
    color: #888;
    display: inline-block;
    vertical-align: top;
    border-bottom: 1px dashed;
    margin: 0 0 10px 0;
    cursor: pointer;
}

.auth__or {
    font: 14px/16px geometria, arial;
    margin: 0 0 8px 0;
}

.auth__submit {
    background: var(--button-bg);
    border: 0;
    color: #fff;
    font: 600 19px/45px geometria, arial;
    position: relative;
    cursor: pointer;
    margin: 0 0 25px 0;
    transition: background-color 250ms;
    display: block;
    width: 100%;
    border-radius: 4px;
}

.auth--screen-login .auth__submit:before {
    content: attr(data-text);
}

.auth--screen-register .auth__submit:before {
    content: attr(data-confirm);
}

.auth--screen-recover .auth__submit:before {
    content: attr(data-confirm);
}

.auth--screen-register.auth--sms .auth__submit:before {
    content: attr(data-register);
}

.auth--screen-recover.auth--sms .auth__submit:before {
    content: attr(data-recover);
}

.auth__policy {
    display: flex;
    cursor: pointer;
    margin: 0 0 25px 0;
}

.auth__policy--selected {
    color: #0085FF;
}

.auth__box {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 4px;
    background: #fff;
    transition: background-color 200ms, border-color 200ms;
    cursor: pointer;
    flex-shrink: 0;
}

.auth__box:before {
    content: "";
    position: absolute;
    left: 1px;
    right: 0;
    bottom: 0;
    top: 2px;
    background: url(./i/checkbox2.svg) no-repeat 50% 0;
    transform: scale(0);
    transition: transform 200ms;
}

.auth__boxLabel {
    font: 16px / 17px "sf pro display";
    margin: 2px 0 0 10px;
    text-align: left;
}

.auth__policy--selected .auth__box {
    border-color: transparent;
    background: #0085FF;
}

.auth__policy--selected .auth__box:before {
    transform: scale(1);
}

.auth__boxCheckbox {
    display: none;
}

.auth__boxLink {
    color: currentColor;
    text-underline-offset: 1px;
    text-decoration: underline;
    cursor: pointer;
}

.auth__boxLink:hover {
    color: #0085FF;
}