// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@include exports('login.clarity') {
    .login-wrapper {
        display: flex;
        background: generateLoginBackground();
        background-size: cover;
        background-position: $clr-login-width 0;
        background-repeat: no-repeat;

        .login {
            background: $clr-login-background-color;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 1rem 2.5rem;
            height: auto;
            min-height: 100vh;
            width: $clr-login-width;

            .title {
                @include clr-getTypePropertiesForDomElement(login_productName, (color, font-weight, font-family, font-size, letter-spacing));
                line-height: 1.5rem;

                .welcome {
                    line-height: 1.5rem;
                }
                .hint {
                    @include clr-getTypePropertiesForDomElement(login_productName, (color));
                    margin-top: 1.25rem;
                    font-size: 0.5833rem;
                }
            }

            .trademark {
                @include clr-getTypePropertiesForDomElement(login_trademark, (color, font-weight, font-family, font-size, letter-spacing));
            }

            .subtitle {
                @include clr-getTypePropertiesForDomElement(login_subtitle, (color, font-weight, font-family, font-size, letter-spacing));
                line-height: 1.5rem;
            }

            .login-group {
                display: flex;
                flex-direction: column;
                padding: 2rem 0 0 0;

                .auth-source, .username, .password, .checkbox {
                    margin: 0.25rem 0 0.75rem 0;
                }

                .tooltip-validation {
                    margin-top: 0.25rem;
                }

                .tooltip-validation .username,
                .tooltip-validation .password {
                    width: 100%;
                    margin-top: 0; //Since the top margin is now handled by the tooltip itself
                }

                .error {
                    display: none;
                    margin: 0.25rem 0 0 0;
                    padding: 0.375rem 0.5rem;
                    // TODO: use contrast checker vs. known background?
                    background: clr-getColor(dark-midtone, reds);
                    color: $clr-login-background-color;
                    border-radius: $clr-global-borderradius;
                    line-height: 0.75rem;

                    &:before {
                        display: inline-block; //needed for IE. display: none to display:flex on parent doesnt work
                        content: '';
                        background: generateErrorIcon($clr-login-background-color);
                        margin: $clr-rem-1px 0.25rem 0 0;
                        height: $clr-login-icon-size;
                        width: $clr-login-icon-size;
                    }

                    &.active {
                        display: flex;

                        &:before {
                            flex: 0 0 $clr-login-icon-size;
                        }
                    }
                }

                .btn {
                    margin: 3rem 0 0 0;
                    max-width: none;
                }

                .error + .btn{
                    margin: 1rem 0 0 0;
                }

                .signup {
                    margin-top: 0.5rem;
                    font-size: 0.5833rem;
                    text-align: center;
                }
            }

            &:after{
                position: absolute;
                content: '';
                display: block;
                width: 1px;
                height: 100%;
                background: rgba($clr-black,0.1);
                top: 0;
                right: -2px;
            }
        }
    }

    @media screen and (max-width: map-get($clr-breakpoints, medium)) {
        .login-wrapper {
            justify-content: center;
            background: $clr-login-background-color;

            .login {
                width: 100%;
                margin-left: 0;
                padding: 1rem 20%;

                &:after{
                    content: none;
                }
            }
        }
    }

    @media screen and (max-width: map-get($clr-breakpoints, small)) {
        .login-wrapper {
            .login {
                padding: 1rem 15%;
            }
        }
    }
}