/**
 * TODO put this into SASS
 * As this currently isn't using SASS, we can't use variables or mixins (hence the breakpoint and colours)
 */

body.login {
    --primary-color: #b30000;

    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center center;

    &.interim-login {
        /* we don't want the background image in the login modal from WP Admin but we will give it a dark colour for contrast */
        background-color: #422;
    }

    &:not(.interim-login) {
        background-image: var(--login-background-image);
    }

    div#login {
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;

        h1 a {
            width: 290px;
            height: 100px;
            background-image: var(--login-logo-image);
            background-size: contain; /* this ensures the entire logo is visible */
            background-repeat: no-repeat;
            background-position: center center;
        }

        p, label { font-family: poppins, arial, sans-serif; font-size: 16px; }

        a {
            color: var(--primary-color);
            text-decoration: none;

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

        p {
            &#nav {
                &, a.wp-login-register, a.wp-login-lost-password, a.wp-login-log-in {
                    color: #fff;
                }
            }

            &#backtoblog a {
            color: #fff;
            }
        }

        input {
            &[type="submit"] {
                background-color: var(--primary-color);
                border-color: var(--primary-color);
                transition: opacity 0.5s;

                &:hover {
                    opacity: 0.6;
                }
            }

            &[type="text"], &[type="password"], &[type="email"] {
                transition: box-shadow 0.5s;

                &:focus {
                    border-color: var(--primary-color);
                    box-shadow: 0 3px 30px rgba(23,73,77,.25);
                }
            }
        }

        .message, .notice, .success {
            border-left-color: var(--primary-color);;
        }
    }
}

@media screen and (min-width: 480px) {
    body.login {
        div#login {
            max-width: 480px;

            h1 a {
                width: 435px;
                height: 150px;
                margin-bottom: 36px;
            }
        }
    }
}