@import "config";

.register-page {
    @mixin passport-page;

    li {
        @mixin li-setting;

        input,
        select {
            outline: none;
        }

        .input {
            @mixin input;

            &.error {
                border: 1px solid red;
            }

            &.phone-num {
                width: 160px;
                height: 40px !important;
                display: block;
                float: left;
                border: none !important;
            }

            &.captcha {
                width: $captcha;
                float: left;
            }

            &.msg-captcha {
                width: $captcha;
                float: left;
            }

            &.agree-terms {
                vertical-align: middle;
            }
        }

        .phone {
            @mixin phone;
        }

        .send-captcha {
            background: $theme-color;
            width: calc($item-width - $captcha - $margin-left);
            float: left;
            margin-left: $margin-left;

            &.disable {
                background: $captcha-btn-fg;
            }
        }

        .btn {
            height: $item-height;
            line-height: @height;
            color: #fff;
            border: none;
            padding: 0;
            text-align: center;
        }

        /* 区域下拉选择框 */
        .region {
            @mixin region;
        }

        /* 手机号 */
        .country-code {
            @mixin country-code;
        }

        .captcha {
            width: $input-button;
            float: left;
        }

        .captcha-component {
            height: $item-height;
            margin-left: $margin-left;
            background-color: $captcha-img-bg;
            width: calc($item-width - $captcha - $margin-left);
        }

        /* 验证码 */
        .captcha-img {
            height: $item-height;
            width: $captcha-img-width;
            border: 0;
            outline: none;
            float: left;
        }

        .change-captcha {
            cursor: pointer;
            float: left;
            width: 40px;
            height: $item-height;
            line-height: @height;
            text-align: center;
        }

        /* 密码强度 */
        .pwd-intensity-container {
            width: 100%;
            margin-top: 5px;
            height: auto;
            text-align: center;

            .pwd-intensity {
                display: inline-block;
                height: 18px;
                line-height: @height;
                width: 108px;
                font-size: 12px;
                background-color: #e8e8e8;
                text-align: center;
                color: white !important;
            }

            &.red {
                .color {
                    background: #999;
                    color: #fff;
                }
            }

            &.yellow .color {
                background: #666;
                color: #fff;
            }

            &.green .color {
                background: #1b1b1b;
                color: #fff;
            }
        }

        /* 立即注册 */
        .register-btn {
            display: inline-block;
            width: 180px;
            font-size: 20px;
            background: $theme-color;

            &.disable {
                background: #555;
            }
        }

        /* 立即登录 */
        &.quick-login-container {
            width: 100%;
            font-size: 13px;
            text-align: center;
            white-space: nowrap;
        }

        &.skip-user-info {
            font-size: 18px;
            text-align: center;

            a {
                color: #ff1901;
                text-decoration: underline;
            }
        }

        .agree-terms {
            cursor: pointer;

            .small {
                @mixin small;
            }
        }

        .img-captcha-wrapper {
            width: $captcha;
        }

        .sms-captcha-wrapper {
            width: $captcha;
        }

        .pwd-wrapper {
            width: 100%;
        }
    }
}

/* 注册成功 */
.success-box {
    font-size: 14px;
    color: #b9b9b9;
    margin: $margin-top auto;
    width: 800px;

    .success-text {
        line-height: 29px;
        font-size: 22px;
        color: $theme-color;
        text-align: center;
    }

    div {
        font-size: 16px;
        text-align: center;
        color: $theme-color;
        margin-top: 30px;
    }

    .success-btn {
        margin: 46px auto 0;
    }
}

.gray {
    color: $captcha-btn-fg;
}