/**
 * Authentication styles.
 */

// adds a bg on login, reset-password, registration
.authentication-page {
    background-color: @body-bg; // fallback to body color if theme has no image

    // styles for bg image
    background-image: url(@login-bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

/**
 * Login modal
 */

.login-modal {
    text-align: center;

    .login-container {
        box-shadow: @modal-content-box-shadow;
    }

    .modal-content {
        // reset bootstrap defaults
        border: none !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
}


/**
 * Login page
 */

.login-page {
    // vertically center the login form in the page
    // if there is lots of space
    justify-content: center;

    .login-logo {
        align-self: center; // avoid image to be stretched
        margin-bottom: @component-margin-bottom;
        max-width: 100%;
    }

    .login-title {
        margin-top: 0;
        margin-bottom: @component-margin-bottom;
    }

    .login-info {
        text-align: justify;
        max-width: @login-max-width;
        align-self: center;
        margin-bottom: @component-margin-bottom;
    }
}

// local vars for dev simplicity
@auth-or-size: 70px;
@auth-or-font-size: 20px;

// In screen > SM, Claroline login form and SSO btns
// are displayed horizontally
.login-container {
    display: flex;
    border: 1px solid @panel-default-border;
    box-shadow: @panel-box-shadow;
    background-color: @panel-bg;
    width: 100%;
    margin: 0 auto @component-margin-bottom;

    // for cases when the auth block is not displayed in the login page
    max-width: floor(@login-max-width / 2);
    &.login-with-sso {
        max-width: @login-max-width;
    }

    .form-primary-section {
        border: none;
        box-shadow: none;

        .panel-body {
            padding: 0;
        }
    }

    .authentication-help {
        font-style: italic;
        color: @gray-light;
        margin-bottom: 30px;
        text-align: center;
    }

    .authentication-column {
        position: relative;
        flex: 1;
        max-width: floor(@login-max-width / 2);
        padding: 30px 45px;
    }

    .primary-external-authentication-column {
        margin-bottom: 30px;
    }

    .account-authentication-column {
        + .external-authentication-column {
            border-left: 1px solid @panel-default-border;
        }
    }

    .authentication-or {
        text-align: center;
        position: absolute;
        z-index: 2;
        right: 0;
        top: 50%;
        transform: translate(50%, -50%);

        font-size: @auth-or-font-size;
        line-height: 1;
        font-weight: 900;

        background: white;
        padding: floor((@auth-or-size - @auth-or-font-size) / 2) 0;
        border-radius: floor(@auth-or-size / 2);

        height: @auth-or-size;
        width: @auth-or-size;
    }

    .external-authentication-column {
        background-color: @panel-footer-bg;
        &::before {
            position: absolute;
            content: " ";
            left: 0;
            top: 50%;
            transform: translate(0, -50%);

            height: @auth-or-size;
            width: floor(@auth-or-size / 2);
            border: 1px solid @panel-default-border;
            border-radius: 0 floor(@auth-or-size / 2) floor(@auth-or-size / 2) 0;
        }
    }
}

@media (max-width: @screen-sm-min) {
    // In screen < SM, Claroline login form and SSO btns
    // are displayed vertically
    .login-container {
        flex-direction: column;

        .account-authentication-column {
            padding-bottom: 45px;

            + .external-authentication-column {
                border-left: none;
                border-top: 1px solid @panel-default-border;
            }
        }

        .authentication-or {
            right: 50%;
            top: auto;
            bottom: 0;
            transform: translate(50%, 50%);
        }

        .external-authentication-column {
            padding-top: 45px;
            &::before {
                position: absolute;
                content: " ";
                left: 50%;
                top: 0;
                width: @auth-or-size;
                height: floor(@auth-or-size / 2);
                transform: translate(-50%, 0);
                border-radius: 0 0 floor(@auth-or-size / 2) floor(@auth-or-size / 2);
            }
        }
    }
}

.btn-registration {
    align-self: center;
    // for cases when the auth block is not displayed in the login page
    max-width: floor(@login-max-width / 2);
    &.login-with-sso {
        max-width: @login-max-width;
    }
}

.btn-third-party-login {
    text-align: left;
    border-radius: @sso-btn-border-radius;
    color: @sso-btn-color !important;
    font-size: @sso-btn-font-size;

    &:hover,
    &:focus {
        color: @sso-btn-color !important;
    }

    .sso-connect-btn(@sso-default-primary, @sso-default-secondary);

    &.dropbox      { .sso-connect-btn(@sso-dropbox-primary,    @sso-dropbox-primary); }
    &.facebook     { .sso-connect-btn(@sso-facebook-primary,   @sso-facebook-secondary); }
    &.github       { .sso-connect-btn(@sso-github-primary,     @sso-github-primary); }
    &.google       { .sso-connect-btn(@sso-google-primary,     @sso-google-secondary); }
    &.linkedin     { .sso-connect-btn(@sso-linkedin-primary,   @sso-linkedin-secondary); }
    &.office_365   { .sso-connect-btn(@sso-office_365-primary, @sso-office_365-secondary); }
    &.twitter      { .sso-connect-btn(@sso-twitter-primary,    @sso-twitter-secondary); }
    &.windows_live { .sso-connect-btn(@sso-office_365-primary, @sso-office_365-secondary); }
}

// TODO : move elsewhere
.external-apps-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: @component-margin-bottom;

    .btn-link {
        font-weight: bold;
    }
}

.external-app {
    margin-bottom: floor(@component-margin-bottom / 2);

    &:last-child {
        margin-bottom: @component-margin-bottom;
    }

    .panel-body {
        display: flex;
        align-items: flex-start;
    }

    .external-app-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 40px;
        border-radius: 50%;
        width: 70px;
        height: 70px;
    }

    .external-app-title {
        flex: 1;
        margin: 0 @panel-body-padding;
        font-weight: 900;

        small {
            font-weight: normal;
            display: block;
            margin-top: 5px;
            font-family: @font-family-monospace;
        }

        b {
            display: inline-block;
            min-width: 60px;
            font-family: @font-family-base;
        }
    }

    &.dropbox      { .external-app-variant(@sso-dropbox-primary,    @sso-dropbox-primary); }
    &.facebook     { .external-app-variant(@sso-facebook-primary,   @sso-facebook-secondary); }
    &.github       { .external-app-variant(@sso-github-primary,     @sso-github-primary); }
    &.google       { .external-app-variant(@sso-google-primary,     @sso-google-secondary); }
    &.linkedin     { .external-app-variant(@sso-linkedin-primary,   @sso-linkedin-secondary); }
    &.office_365   { .external-app-variant(@sso-office_365-primary, @sso-office_365-secondary); }
    &.twitter      { .external-app-variant(@sso-twitter-primary,    @sso-twitter-secondary); }
    &.windows_live { .external-app-variant(@sso-office_365-primary, @sso-office_365-secondary); }
}

.external-app-variant(@color, @secondary-color) {
    .external-app-icon {
        background-color: @color;
    }
}


/**
 * Link external app page
 */

.external-link-container {
    text-align: center;
    max-width: floor(@login-max-width / 2);
    width: 100%;
    margin: 0 auto @component-margin-bottom;

    .img-thumbnail {
        border-radius: 50%;
    }

    .external-app-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 72px;
        border-radius: 50%;
        width: 100px;
        height: 100px;
    }

    .external-link-title {
        margin-top: 0;
        font-weight: 900;

        > small {
            display: block;
            font-weight: normal;
            margin-bottom: 5px;
        }
    }

    .external-link-panel {
        margin-top: -55px;
        border: 1px solid @panel-default-border;
        border-radius: @panel-border-radius;
        background: @panel-bg;
        padding: 30px 45px;
        padding-top: 55px + 15px; // half-size of the app icon (4px comes from img-thumbnail) + standard padding

        .box-shadow(@panel-box-shadow);
    }

    &.dropbox      { .external-app-variant(@sso-dropbox-primary,    @sso-dropbox-primary); }
    &.facebook     { .external-app-variant(@sso-facebook-primary,   @sso-facebook-secondary); }
    &.github       { .external-app-variant(@sso-github-primary,     @sso-github-primary); }
    &.google       { .external-app-variant(@sso-google-primary,     @sso-google-secondary); }
    &.linkedin     { .external-app-variant(@sso-linkedin-primary,   @sso-linkedin-secondary); }
    &.office_365   { .external-app-variant(@sso-office_365-primary, @sso-office_365-secondary); }
    &.twitter      { .external-app-variant(@sso-twitter-primary,    @sso-twitter-secondary); }
    &.windows_live { .external-app-variant(@sso-office_365-primary, @sso-office_365-secondary); }
}


/**
 * Password recovery page
 */

.password-recovery-form {
    padding: 30px 45px;

    .btn-primary {
        margin-top: 15px;
    }
}
