@import "config";

.back-page {
    @mixin passport-page;

    li {
        @mixin li-setting;

        &.small {
            height: calc($item-height / 3);
            margin-bottom: 5px;
        }
    }

    .country-code {
        @mixin country-code;
    }

    .country-list {
        @mixin region;
    }

    .phone {
        @mixin phone;
    }

    .input {
        @mixin input;

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

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

    .captcha-component {
        margin-left: $margin-left;
        background-color: $captcha-img-bg;
        width: 130px;
    }

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

    /* 验证码 */

    .captcha-img {
        height: 37px;
        width: 90px;
        border: 0;
        outline: none;
        margin-left: 10px;
        margin-top: 4px;
        float: left;
    }

    .change-captcha {
        cursor: pointer;
        height: 43px;
        font-size: 14px;
        line-height: @height;
    }

    .find-btn {
        display: inline-block;
        width: 180px;
        height: $item-height;
        background-color: $theme-color;
        color: white;
        margin-top: 40px;
        line-height: @height;
        cursor: pointer;

        &.disable {
            background-color: $inactive-color;
        }
    }

    .center {
        text-align: center;
    }

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

.send-email-page {
    @mixin passport-page;

    li {
        @mixin li-setting;
    }

    .no-find {
        text-align: center;
        color: $captcha-btn-fg;
    }

    .to-my-email {
        display: inline-block;
        width: $item-width;
        height: $item-height;
        line-height: @height;
        font-size: 15px;
        background-color: $theme-color;
        text-align: center;
        color: white;
    }
}

.verification-page {
    @mixin passport-page;

    li {
        @mixin li-setting;
    }

    .desc {
        text-align: center;
        line-height: 20px;
        margin-top: -10px;
    }

    .captcha {
        width: 200px;
    }

    .send-captcha {
        width: $input-button;
        height: $item-height;
        font-size: 12px;
        letter-spacing: 0;
        background: $theme-color;
        margin-left: 20px;
        color: white;
        line-height: @height;

        &.disable {
            background-color: $inactive-color;
        }
    }

    .err-tip {
        left: 310px;
    }

    .next-step {
        display: inline-block;
        width: 180px;
        height: $item-height;
        line-height: @height;
        font-size: 15px;
        background-color: $theme-color;
        text-align: center;
        color: white;
        margin: 0 calc(($item-width - @width) / 2);

        &.disable {
            background-color: $inactive-color;
        }
    }

    .blank {
        height: 20px;
    }
}

.reset-pwd-page {

    .blank {
        height: 20px;
    }

    .reset-pwd-btn {
        display: inline-block;
        width: 180px;
        height: $item-height;
        line-height: @height;
        font-size: 15px;
        background-color: $theme-color;
        text-align: center;
        color: white;
        margin: 0 calc(($item-width - @width) / 2);
        border: none;
        cursor: pointer;

        &.disable {
            background-color: $inactive-color;
        }
    }
}

.reset-success-page {
    .success-text {
        line-height: 35px;
        text-align: center;

        .title {
            font-size: 18px;
        }

        .small-title {
            font-size: 16px;
        }

        .time {
            font-size: 14px;
            color: $inactive-color;
        }
    }
}

$step-height: calc($item-height / 2);
$step-circle: 12px;
$step-line: calc(($item-width - 3 * $step-circle) / 2);

.indicator {
    .draw {
        width: $item-width;
        .step {
            color: $captcha-btn-fg;
            font-weight: bold;
            height: $step-height;
            float: left;

            .line {
                width: $step-line;
                border: 1px solid $captcha-btn-fg;

                &.cur-step {
                    border-color: $theme-color;
                }

                margin-top: calc(($step-height - 2px) / 2);

            }

            .circle {
                width: $step-circle;
                height: @width;
                background: $theme-color;
                border-radius: calc(@width / 2);
                &.ring {
                    border: 2px solid $theme-color;
                    background-color: white;
                }

                margin-top: calc(($step-height - @height) / 2);
            }
        }
    }

    .text {
        width: $item-width;
        height: $item-height;
        clear: left;

        .step {
            color: $captcha-btn-fg;
            width: calc($item-width / 3);
            float: left;

            &.first {
                text-align: left;
            }

            &.second {
                text-align: center;
            }

            &.third {
                text-align: right;
            }

            &.cur-step {
                color: $theme-color;
            }
        }
    }

}