.auth-login {
    @include background-size(cover);
    background-image: url(get-resource-path('images/auth/background.png'));
    background-position: calc(50% - 280px) calc(50% - 20px);
    background-size: 447px 340px;
    background-repeat: no-repeat;
    background-color: $base-color;
}

@include extjs-button-small-ui(
    $ui: 'login',
    $background-color: $base-color,
    $border-color: darken($base-color, 5%)
);

@include extjs-button-large-ui(
    $ui: 'login',
    $line-height: 34px,
    $background-color: $base-color,
    $border-color: darken($base-color, 5%)
);

.auth-dialog {
    @include border-radius(10px);

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

    .x-form-text-default,
    .x-placeholder-label-default {
        padding: 15px;
    }

    .trigger-glyph-noop {
        cursor: default;
    }

    .x-form-trigger {
        text-align: right;
        width: 50px;

        &:before{
            top: 10px;
            left: -18px;
            position: relative;
            color: $color-gray;
            font-size: 30px;
        }
    }

    .auth-locale-trigger:before {
        content: "\f0ac";
    }

    .auth-datacenter-trigger:before {
        content: "\f1c0";
    }

    .auth-password-trigger:before {
        content: "\f023";
    }

    .auth-email-trigger:before {
        content: "\f007";
    }

    .link-forgot-password {
        line-height: 32px;
        color: $base-color;
        text-decoration: none;
        margin-left: 5px;

        &:hover {
            text-decoration: underline;
        }
    }

    .x-btn {
        .x-btn-icon-el {
            &:before {
                right: 10px;
                font-size: 24px;
                position: absolute;
            }
        }
    }
}

.auth-dialog-login {
    position: absolute;
    right: 50%;
    top: 50%;
    margin-right: -415px;
    margin-top: -215px;
}

.auth-login-footer {
    background-color: #fff;
    padding: 20px 0 20px 0;
    text-align: center;
    font-size: 12px;
}