@import "config";

.login-page {
    @mixin passport-page;

    li {
        @mixin li-setting;
    }

    .login-fail-tip {
        position: absolute;
        top: -20px;
        color: $blue;

        span {
            font-size: 0.8em;
            color: $blue;
            font-weight: bold;
        }
    }

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

    .country-list {
        @mixin region;
    }

    .phone {
        @mixin phone;

        .rectangle {
            width: auto;
            min-width: 100%;
            white-space: nowrap;
            padding-right: 15px;

            a {
                padding-left: 5px;
            }
        }
    }

    .input {
        @mixin input;

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

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

    .login-btn {
        margin-top: 35px;
        height: $item-height;
        width: $item-width;
        line-height: @height;
        border: none;
    }

    .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;
    }

    .remember-me {
        cursor: pointer;

        .small {
            @mixin small;
        }
    }

    .other-opts {
        color: #b9b9b9;
        font-size: 14px;
        text-align: center;
    }

    .third-party-login {
        margin: 0 30px;

        span {
            float: left;
            width: calc(($item-width - 60px) / 4);
            font-size: 25px;
            text-align: center;
        }
    }

    .pwd-wrapper {
        width: 100%;
    }

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

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

        .rectangle {
            width: auto;
            min-width: 100%;
            white-space: nowrap;
        }
    }

    $switchbg: #ccc;

    .switch {
        width: 100%;
        height: 26px;
        background: url(/passport/login-mode-bg.png) no-repeat;
        font-size: 14px;

        .left {
            width: 170px;
            height: 26px;
            text-align: center;
            line-height: @height;
            position: absolute;
            left: 0;
            cursor: pointer;

            &.selected {
                background: url(/passport/login-mode-select.png) no-repeat;
                color: white;
            }
        }

        .right {
            width: 170px;
            height: 26px;
            text-align: center;
            line-height: @height;
            position: absolute;
            right: 0;
            cursor: pointer;

            &.selected {
                background: url(/passport/login-mode-select.png) no-repeat;
                color: white;
            }
        }
    }

    .sms-btn-wrap {
        margin-left: 15px;
        width: 130px;
        height: 44px;

        .sms-btn {
            width: 100%;
            height: 44px;
            line-height: 44px;
            border: none;
        }
    }
}