@import "_settings";
@import "_mixins";

.clef-login-form {
    $button-width: 188px;
    $button-height: 35px;

    .clef-button-container {
        width: $button-width;
        height: $button-height;
        margin: auto;
    }
}

.clef-login-form:not(.login-action-register):not(.login-action-lostpassword):not(.login-action-rp) {
    .clef-login-container {
        .clef-button-container {
            margin-bottom: 30px;
        }

        .close-overlay, .overlay-info, .open-overlay {
            display: none;
        }
    }

    // Styles for when login is clef only and it's the button
    &.clef-hidden:not(.clef-login-form-embed):not(.clef-override-or-invite):not(.clef-auto-connect-account) {
        #login form#loginform {
            padding: 40px 20px;
            input, label {
                display: none;
            }
        }
    }

    // Styles for when Clef is embedded
    &.clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) {
        &:not(.interim-login) #login {
            padding-top: 50px;
        }

        #login {
            width: 400px;
            max-width: 100%;
            margin: auto;

            input, label {
                visibility: hidden;
            }

            form {
                box-sizing: border-box;
                width: 100%;
                height: 520px;
                position: relative !important;
            }

            .clef-embed-wrapper {
                margin: auto !important;
            }
        }

        .clef-login-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            overflow: visible;

            .clef-button-container {
                padding-top: 5px;
            }
        }

        &:not(.clef-closed) {
            p#nav {
                display: none;
            }
        }

        &.clef-closed {
            #login {
                width: 320px;
                input, label {
                    visibility: visible
                }

                form {
                    height: auto;
                }
            }

            .clef-login-container {
                height: 25px;
                top: auto;
                bottom: 0;
            }

            .clef-button-container {
                display: none;
            }
            .overlay-info, .close-overlay {
                display: none;
            }

            .open-overlay {
                display: block;
                margin: 0;
            }
        }

        .clef-button-container {
            margin: 0 auto;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            .spinner-container {
                display: none;
                text-align: center;
                position: absolute;
                top: 175px;
                left: 0;
                width: 100%;
                height: 100%;
                .spinner {
                    margin-top: 25px;
                    display: inline-block;
                    float: none;
                    width: 50px;
                    height: 50px;

                    background-image: url(../img/loading.gif);
                    background-size: 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
        }

        .overlay-text {
            position: absolute;
            width: 100%;
            bottom: 12px;
            margin-top: 5px;
            text-align: center;
            display: block;
            color: #aaa;
            cursor: pointer;
            text-decoration: none;

            &:hover {
                color: #999;
            }

            &:active {
                outline: none;
            }
        }

        .or-container, .open-overlay {
            display: none;
        }

        .overlay-info {
            display: block;
            position: absolute;
            bottom: 10px;
            left: 0;
            .info {
                box-sizing: border-box;
                width: 90%;
                margin: auto;
                border: 1px solid #eee;
                padding: 10px;
                background: white;
                color: #999;
                p {
                    font-size: 11px;
                    line-height: 15px;
                    a {
                        color: #999;
                    }
                    &:not(:last-child) {
                        margin-bottom: 5px !important;
                    }
                }
            }
            .open {
                $size: 15px;
                $color: #ccc;
                height: $size;
                width: $size;
                font-size: 10px;
                text-align: center;
                line-height: $size;
                border-radius: $size;
                color: $color;
                border: 1px solid $color;
                cursor: pointer;
                margin-left: 10px;
                display: none;
                &:hover {
                    color: darken($color, 10%);
                    border-color: darken($color, 10%);
                }
            }

            &.closed {
                .info {
                    display: none;
                }
                .open {
                    display: block;
                }
            }
        }
    }

    @media screen and (max-width: 400px) {
        &.clef-login-form-embed:not(.clef-override-or-invite) {
            #login {
                width: 320px;
                padding: 0;
            }
        }
    }
}

.login-action-register.clef-login-form {
    .clef-register-container {
        padding-top: 20px;
    }
}


