/**
 * -------------------------------------------------------------------------
 *
 * The styles for the Log In page.
 *
 * -------------------------------------------------------------------------
 *
 * Inspired by code pen "Snake highlight" of Mikael Ainalem
 * https://codepen.io/ainalem/pen/EQXjOR
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Static Pages only
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    @import url( 'reset.css'     );
    @import url( 'colors.css'    );
    @import url( 'fonts.css'     );
    @import url( 'autoscale.css' );

    ::selection {
        background: var( --selectionBackground );
        color: var( --selectionColor );
    }
    ::-webkit-selection {
        background: var( --selectionBackground );
        color: var( --selectionColor );
    }
    ::-moz-selection {
        background: var( --selectionBackground );
        color: var( --selectionColor );
    }

    html {
        background: var( --htmlBackground );
        display: block;
        font-family: var( --fontName );
        font-size: var( --fontSize );
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

        body {
            background: var( --bodyBackground );
            border-radius: 0.5rem;
            border: var( --bodyBackground ) 1rem solid;
            display: block;
            margin: 1rem;
            width: calc( 100% - 1rem - 1rem );
            height: calc( 100% - 1rem - 1rem );
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: var( --bodyBackground ) var( --leftBackground );
        }
        body::before,
        body::after {
            content: "";
            display: block;
            height: 1rem;
            width: calc( 100% - 2rem - 2rem - 1rem );
            position: fixed;
            left: 2rem;
            z-index: 1;
        }
        body::before {
            background: linear-gradient( var( --bodyBackground ) 0%,
                                         transparent             100% );
            top: 2rem;
        }
        body::after {
            background: linear-gradient( transparent             0%,
                                         var( --bodyBackground ) 100% );
            bottom: 2rem;
        }

            .wrapper {
                background: var( --wrapperBackground );
                display: flex;
                flex-direction: column;
                place-content: center;
                height: 100%;
                min-height: max-content;
                width: 100%;
            }
            @media (max-width: 767px) {
                .wrapper {
                }
            }

                .success,
                .error {
                    display: block;
                    line-height: 1.5;
                    margin: 1rem auto;
                    width: 40rem;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .success:not(:empty) + .error {
                    margin-top: 0;
                }
                .success {
                    background: var( --successBackground );
                    color: var( --successColor );
                }
                .error {
                    background: var( --errorBackground );
                    color: var( --errorColor );
                }
                .success:empty,
                .error:empty {
                    display: none !important;
                }
                @media (max-width: 767px) {
                    .success,
                    .error {
                    }
                }

                .content {
                    background: var( --contentBackground );
                    display: flex;
                    height: 20rem;
                    min-height: 20rem;
                    width: 40rem;
                    margin-bottom: 1rem;
                }
                .success:empty + .error:empty + .content {
                    margin-top: 1rem;
                }
                @media (max-width: 767px) {
                    .content {
                        flex-direction: column;
                        height: auto;
                        min-height: auto;
                        width: 20rem;
                    }
                }

                    .left {
                        background: var( --leftBackground );
                        border-radius: 0.5rem 0 0 0.5rem;
                        color: var( --textColor );
                        display: block;
                        line-height: 1.5;
                        height: calc( 100% - 3rem );
                        width: calc( 50% - 0.5rem );
                        top: 1.5rem;
                        left: 0.5rem;
                    }
                    @media (max-width: 767px) {
                        .left {
                            border-radius: 0.5rem 0.5rem 0 0;
                            height: auto;
                            width: calc( 100% - 3rem );
                            top: auto;
                            left: auto;
                        }
                    }

                        .title,
                        h1,
                        h2,
                        h3,
                        h4,
                        h5,
                        h6 {
                            color: var( --titleColor );
                            display: block;
                            font-size: 1.75rem;
                            font-weight: 900;
                            margin: 1.5rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        h2 {
                            font-size: 1.8rem;
                            font-weight: bold;
                        }
                        h3 {
                            font-size: 1.6rem;
                            font-weight: bold;
                        }
                        h4 {
                            font-size: 1.4rem;
                            font-weight: bold;
                        }
                        h5 {
                            font-size: 1.2rem;
                            font-weight: bold;
                        }
                        h6 {
                            font-size: 1rem;
                            font-weight: bold;
                        }

                        p {
                            color: var( --textColor );
                            display: block;
                            font-size: 1rem;
                            line-height: inherit;
                            margin: 1.5rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                            code {
                                background: var( --bodyBackground );
                                border-radius: 1em;
                                color: var( --successColor );
                                display: inline-block;
                                font-family: monospace;
                                padding: 0 0.5em;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                opacity: 0.75;
                            }
                            code[title]:empty:before {
                                content: attr( title );
                            }

                        .left .btn {
                            width: min-content;
                            margin: -0.5rem auto 1.5rem;
                            opacity: 1;
                        }

                        .left a:not(.btn) {
                            color: var( --linkColor );
                            overflow: hidden;
                            text-overflow: ellipsis;
                            text-decoration: underline;
                            vertical-align: baseline;
                        }
                        .left a:not(.btn):hover,
                        .left a:not(.btn):active,
                        .left a:not(.btn):focus {
                            text-decoration: none;
                        }

                    .right {
                        background: var( --rightBackground );
                        border-radius: 0.5rem;
                        box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.2);
                        color: var( --rightColor );
                        display: block;
                        height: 100%;
                        width: calc( 50% - 0.5rem );
                        right: 0.5rem;
                    }
                    @media (max-width: 767px) {
                        .right {
                            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
                            flex-shrink: 0;
                            height: 19rem;
                            width: 100%;
                            right: auto;
                        }
                    }

                        svg {
                            display: block;
                            height: 100%;
                            width: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }

                            svg path {
                                fill: none;
                                stroke: url( #linearGradient );
                                stroke-width: 4;
                                stroke-dasharray: 240 1386;
                            }
                            svg:has(~ .form input[name="login"][readonly]) path {
                                stroke-dashoffset: -21rem;
                            }

                        .form {
                            background: var( --formBackground );
                            color: var( --formColor );
                            display: block;
                            line-height: 1.5;
                            padding: 2rem;
                        }

                            .right h1,
                            .right h2,
                            .right h3,
                            .right h4,
                            .right h5,
                            .right h6 {
                                color: var( --formText );
                                margin: 0 auto 1rem;
                            }

                            .right p {
                                color: var( --formText );
                                margin: 0 auto 1rem;
                            }

                            label {
                                color: var( --formColor );
                                display: block;
                                font-size: 1rem;
                                margin-top: 2rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            label + label {
                                margin-top: 0.75rem;
                            }
                            @media (max-width: 767px) {
                                label {
                                    margin-top: 1.75rem;
                                }
                            }

                                label span {
                                    display: block;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                input[type="number"],
                                input[type="text"],
                                input[type="password"],
                                input[type="file"],
                                select,
                                textarea {
                                    background: var( --inputBackground );
                                    border-radius: 0.5rem;
                                    color: var( --inputColor );
                                    display: block;
                                    font-size: 1rem;
                                    height: 2rem;
                                    line-height: 2rem;
                                    outline: none !important;
                                    width: 100%;
                                    margin-top: 0.25rem;
                                    padding: 0 1rem;
                                }
                                input[type="number"]::-moz-focus-inner,
                                input[type="text"]::-moz-focus-inner,
                                input[type="password"]::-moz-focus-inner,
                                input[type="file"]::-moz-focus-inner,
                                select::-moz-focus-inner,
                                textarea::-moz-focus-inner {
                                    border: 0; 
                                }
                                input[type="file"]::file-selector-button {
                                    display: none;
                                }
                                textarea {
                                    line-height: inherit;
                                    min-height: 10rem;
                                    height: 10rem;
                                    padding: 0.5rem 1rem;
                                    resize: vertical;
                                    scrollbar-width: thin;
                                    scrollbar-color: var( --rightBackground ) var( --formText );
                                }

                                    select option {
                                        color: var( --rightBackground );
                                    }

                                a.misc {
                                    background: var( --buttonBackground );
                                    border-radius: 0.25rem;
                                    color: var( --buttonColor );
                                    width: 1.25rem;
                                    opacity: 0.5;
                                    text-align: center;
                                    position: absolute;
                                    bottom: 0.33rem;
                                    right: 0.33rem;
                                }
                                label:has(.misc) input[type="number"],
                                label:has(.misc) input[type="text"],
                                label:has(.misc) input[type="password"],
                                label:has(.misc) input[type="file"],
                                label:has(.misc) select {
                                    padding-right: 2rem;
                                }

                            .btn {
                                background: var( --submitBackground );
                                border-radius: 1rem;
                                color: var( --submitColor );
                                display: block;
                                font-size: 1rem;
                                height: 2rem;
                                line-height: 2rem;
                                outline: none !important;
                                width: 75%;
                                margin-top: 2.75rem;
                                padding: 0 1rem;
                                text-align: center;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                transition: background 300ms,
                                            color 300ms;
                            }
                            .btn.compact {
                                display: inline-block;
                                width: min-content;
                                margin-left: 0.5rem;
                                margin-right: 0.5rem;
                            }
                            .btn:hover,
                            .btn:focus {
                                color: var( --submitFocus );
                            }
                            .btn:active {
                                color: var( --submitActive );
                            }
                            @media (max-width: 767px) {
                                .btn:not(a) {
                                    margin-top: 2.6rem;
                                }
                            }

                            a.btn {
                                background: var( --buttonBackground );
                                color: var( --buttonColor );
                                width: 12rem;
                                margin-top: 2rem;
                                opacity: 0.75;
                            }
                            a.btn:hover,
                            a.btn:active,
                            a.btn:focus {
                                background: var( --buttonFocus );
                                opacity: 1;
                            }
                            a.btn:active {
                                color: var( --buttonActive );
                            }

                .footnote {
                    background: var( --footnoteBackground );
                    color: var( --footnoteColor );
                    display: block;
                    margin: 1rem auto;
                    text-align: center;
                }
                .footnote:empty {
                    display: none !important;
                }
                @media (max-width: 767px) {
                    .footnote {
                    }
                }

                    .footnote .tools {
                        display: inline-block;
                    }

                    .footnote a,
                    .footnote .tools summary {
                        color: var( --footnoteColor );
                        cursor: pointer;
                        line-height: 1.5;
                        margin: 0.25rem 1rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        transition: color 300ms;
                    }
                    .footnote .tools summary + div {
                        background: var( --leftBackground );
                        border: var( --footnoteColor ) 1px solid;
                        display: block;
                        max-width: 33vw;
                        position: absolute;
                        bottom: 2rem;
                        left: 0;
                        z-index: 1;
                    }
                        .footnote .tools summary + div a {
                            display: block;
                            margin: 0;
                            padding: 0.5rem 1rem;
                        }
                        .footnote .tools summary + div a:hover,
                        .footnote .tools summary + div a:active,
                        .footnote .tools summary + div a:focus {
                            background: var( --footnoteFocus );
                            color: var( --leftBackground );
                        }
                    .footnote a {
                        display: inline-block;
                    }
                    a:hover,
                    a:active,
                    a:focus,
                    a.tool:hover,
                    a.tool:active,
                    a.tool:focus,
                    .footnote .tools summary:hover,
                    .footnote .tools summary:active,
                    .footnote .tools summary:focus {
                        color: var( --footnoteFocus );
                    }
