// Layout for "Outside" pages, such as the Login screen
//

body.outer {
    background: @color-outer-bg;

    .layout {
        > .layout-row {
            &.layout-head {
                text-align: center;
                background: @color-outer-header;

                > .layout-cell {
                    height: 40%;
                    padding: 50px 0;
                    .box-sizing(border-box);
                    vertical-align: middle;
                    position: relative;

                    &:after {
                        .triangle(down, 70px, 25px, @color-outer-header);
                        position: absolute;
                        bottom: -25px;
                        left: 50%;
                        margin-left: -22px;
                    }

                    h1.oc-logo {
                        .hide-text();
                        display: inline-block;
                        width: 100%;
                        max-width: 450px;
                        height: 170px;
                        min-height: 72px;
                    }
                }
            }

            > .layout-cell {
                vertical-align: top;

                .outer-form-container {
                    margin: 0 auto;
                    width: 436px;
                    padding: (@padding-standard * 2) 0;

                    h2 {
                        font-size: 18px;
                        margin: 20px 0;
                        color: @color-outer-heading;
                    }

                    .horizontal-form {
                        font-size: 0;
                        .flex-display();

                        input {
                            vertical-align: top;
                            margin-right: 9px;
                            display: inline-block;
                            border: none;
                            .border-radius(2px);
                        }

                        button {
                            background: @link-color;
                            text-align: center;
                            font-size: 13px;
                            font-weight: 600;
                            height: 40px;
                            vertical-align: top;
                            .box-sizing(border-box);
                        }
                    }

                    .forgot-password {
                        margin-top: 30px;
                        font-size: 13px;
                        top: 8px;

                        a {
                            color: @color-outer-muted-text;
                        }

                        &:before {
                            color: @color-outer-muted-text;
                            font-size: 14px;
                            position: relative;
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }
}

html.csstransitions {
    body.outer {
        .outer-form-container {
           .transition(all 0.5s ease-out);
            .scaleAxes(1, 1);
        }

        &.preload {
            .outer-form-container {
                .scaleAxes(0.2, 0.2);
            }
        }
    }
}

@media (max-width: @screen-sm) {
    body.outer .layout > .layout-row {
        &.layout-head {
            > .layout-cell {
                padding: 50px @padding-standard;
            }
        }

        > .layout-cell .outer-form-container {
            width: auto;
            padding: @padding-standard * 2;

            .horizontal-form {
                display: block;

                input {
                    display: block;
                    width: 100% !important;
                    margin-bottom: @padding-standard;
                }
            }
        }
    }
}