/*
    insecure.css serves as the base styles for the application when not in the
    grid-based secure area. It provides general spacing and layout for elements.

    Note: insecure.css loads when the route is outside of the /home/* path. (secure.css loads otherwise)

 */


@layer app {

    app-wrapper {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 6em); /* Account for body padding */
        user-select: none;

        @media(max-width: 500px) {
            min-height: calc(100vh - 4.5em); /* Account for body padding on small screens */
        }

        input {
            max-width: 550px;
        }
    }

    .login-grid {
        display: grid;
        height: 100vh;
        grid-template-columns: 50% 50%;
        align-items: center;
        align-content: stretch;

        > :first-child {
            display: flex;
            flex-direction:column;
            background: linear-gradient(167deg, var(--black) 0%, var(--madave-purple) 35%, var(--lt-gray) 90%);
            height: 100%;
            padding: 3rem;

        }

        > :last-child {
            padding-left: 2rem;
        }
    }


    login-grid {
        display: grid;
        margin-top: auto;
        margin-bottom: auto;

        user-select: none;
        align-items: start;

        > div {
            max-width: 500px;
            margin-right: auto;
            padding: 2.5rem;
            padding-left: 3rem;
            min-height: 600px;
        }
    }





    logos-container {
        margin-top: auto;
        padding-top: 2em;

        > .flex {
            flex-wrap: wrap;
        }

        > span:last-child {
            text-wrap: nowrap;
            width: 60px;
        }

    }

}