@import url("https://croomssched.tech/styles/icons.css");

@font-face {
    font-family: "Croomssched Sans";
    src: url("https://cdn.croomssched.tech/fonts/CroomsschedSans/regular.eot")format("embedded-opentype"),
    url("https://cdn.croomssched.tech/fonts/CroomsschedSans/regular.woff2")format("woff2"),
    url("https://cdn.croomssched.tech/fonts/CroomsschedSans/regular.woff")format("woff"),
    url("https://cdn.croomssched.tech/fonts/CroomsschedSans/regular.ttf")format("truetype"),
    url("https://cdn.croomssched.tech/fonts/CroomsschedSans/regular.svg")format("svg");
}

@font-face {
    font-family: "SegoeUI";
    src: url("https://cdn.croomssched.tech/fonts/SegUIVar.woff2");
}

:root {
    --body-background: #EEE;
    --body-color: black;
    --pri: #DDD;
    --sec: #CCC;
    --tri: #BBB;
    --qua: #AAA;
    --pri-t: #DDD8;
    --sec-t: #CCC8;
    --tri-t: #BBB8;
    --qua-t: #AAA8;
    --pass: #259300;
    --warn: #ffb700;
    --fail: #CC0000;
    --info: #0078d4;
    --link: var(--info);
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --body-background: #111;
        --body-color: white;
        --pri: #222;
        --sec: #333;
        --tri: #444;
        --qua: #555;
        --pri-t: #2228;
        --sec-t: #3338;
        --tri-t: #4448;
        --qua-t: #5558;
    }
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--sec);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tri);
}

::-webkit-scrollbar-thumb:active {
    background: var(--qua);
}

.hidden {
    display: none !important;
}

body {
    margin: 0;
    font-family: "Croomssched Sans", "SegoeUI", sans-serif !important;
    background: var(--body-background);
    color: var(--body-color);

    #small {
        display: none;
    }

    header {
        background: var(--pri);
        transition: width 0.2s, max-width 0.2s, min-width 0.2s, transform 0.2s;
        width: fit-content;
        height: 100vh;
        position: fixed;
        top: 0;

        div.main {
            background: var(--pri);
            position: relative;
            z-index: 100;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            user-select: none;
            width: 300px;
            transition: width 0.2s, max-width 0.2s, min-width 0.2s, transform 0.2s;
            height: 100%;

            h1, h2, h3 {
                margin: 0;
            }

            h1 {
                display: flex;
                flex-flow: row nowrap;

                .label {
                    font-weight: 900;
                    font-size: 1.5rem;
                    text-decoration: none;
                    color: var(--body-color);
                    padding: 10px;
                    display: block;
                    width: calc(100% - 20px);
                    cursor: default;
                }

                svg {
                    padding: 10px;
                    display: none;
                    fill: var(--body-color);
                }

                .label:hover, svg:hover {
                    background: var(--sec);
                }

                .label:active, svg:active {
                    background: var(--tri);
                }
            }

            nav {
                margin-top: 15px;
                font-size: 0.95rem;

                h2 {
                    padding: 0 10px;
                    font-size: 1.3rem;
                }

                h3 {
                    padding: 15px 10px 5px;
                    font-size: 1.2rem;
                }

                a {
                    padding: 10px;
                    color: var(--body-color);
                    text-decoration: none;
                    display: block;
                    width: calc(100% - 20px);
                    cursor: default;
                }

                a:hover {
                    background: var(--sec);
                }

                a:active {
                    background: var(--tri);
                }
            }

            section:last-child a {
                padding: 10px;
                text-align: center;
                cursor: default;
                display: block;
                text-decoration: none;
                color: var(--body-color);
            }

            section:last-child a:link:hover {
                background: var(--tri);
            }
        }

        div.mini {
            position: fixed;
            top: 0;
            z-index: 99;

            svg {
                padding: 10px;
                fill: var(--body-color);
            }

            svg:hover {
                background: var(--sec);
            }
        }
    }

    main {
        margin-left: 300px;
        padding: 18px;

        h1, h2 {
            margin: 0;
        }

        h3, h4, h5, h6 {
            margin-top: 8px;
            margin-bottom: 0;
        }

        p, ul, ol, dl {
            margin-top: 0;
        }

        iframe, video {
            width: 100%;
            border: 0;
            min-height: 40vh;
        }

        table {
            border-spacing: 0;
            margin-bottom: 10px;

            td {
                border: solid 1px var(--body-color);
                text-align: center;
            }
        }
    }

    a:link {
        color: var(--link);
    }

    a:link:hover {
        text-decoration: none;
    }

    button {
        font-family: "Croomssched Sans", "SegoeUI", sans-serif !important;
        background: var(--link);
        color: white;
        padding: 8px 16px;
        border-radius: 5px;
        border: none;
    }

    button:hover {
        opacity: 0.8;
    }

    button:active {
        opacity: 0.6;
    }

    button:disabled {
        opacity: 0.4;
    }

    .note {
        font-style: italic;
        font-size: 9pt;
    }

    .form, #form {
        div {
            display: flex;
            flex-flow: row nowrap;
            justify-content: left;
            align-items: center;

            label {
                padding: 2px 0;
            }
        }

        button {
            margin-top: 1rem;
        }

        #explanation {
            h4 {
                margin-top: 1rem;
            }

            p {
                margin-bottom: 0;
            }
        }
    }

    input[type="radio"] {
        margin-right: 8px;
        appearance: none;
        border: 1px solid var(--qua);
        border-radius: 50%;
        height: 1rem !important;
        margin-inline-end: .5rem !important;
        width: 1rem !important;
    }

    input[type="radio"]:checked {
        background-image: url("/images/quizzes/circle-blue.svg");
        border-color: var(--link);
        border-width: .125rem;
    }

    input[type="radio"].incorrect {
        background-image: url("/images/quizzes/circle-red.svg");
        border-color: var(--fail);
    }

    input[type="radio"].correct {
        background-image: url("/images/quizzes/circle-green.svg");
        border-color: var(--pass);
    }

    div.checkbox {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        input[type="checkbox"] {
            margin-right: 8px;
            appearance: none;
            border: 1px solid var(--qua);
            height: 1rem !important;
            margin-inline-end: .5rem !important;
            width: 1rem !important;
        }

        input[type="checkbox"]:checked {
            background-image: url("/images/quizzes/square-blue.svg");
            border-color: var(--link);
            border-width: .125rem;
        }
    }

    ul.details {
        margin: 1rem 0;
    }

    .actionbar {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;

        * {
            margin-right: 5px;
        }

        *:last-child {
            margin-right: 0;
        }
    }

    .note-box {
        padding: 0.5rem;
        background: var(--pri);
        border-radius: 0.5rem;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        span.icon {
            font-family: "MatIcons", system-ui;
            display: block;
            margin-right: 0.5rem;
            font-size: 2rem;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        span.icon:before {
            content: "info";
        }

        * {
            margin-top: 0;
        }

        *:last-child {
            margin: 0;
        }
    }

    .note-box.alert {
        background: var(--fail);
        color: white;

        span.icon:before {
            content: "error";
        }

        a {
            color: inherit !important;
        }
    }

    .note-box.warn {
        background: var(--warn);
        color: black;

        span.icon:before {
            content: "warning";
        }

        a {
            color: inherit !important;
        }
    }

    .note-box.info {
        background: var(--info);
        color: white;

        a {
            color: inherit !important;
        }
    }
}

@media print {
    body {
        background: revert;

        [no-print],
        header,
        div.main,
        div.mini,
        div#small,
        .note,
        button {
            display: none;
        }

        main {
            margin-left: 0;
        }
    }


    @page {
        @bottom-right-corner {
            content: "Page " counter(pageNumber);
        }

        @bottom-left-corner {
            content: "Printed from https://study.croomssched.tech";
        }
    }
}