:root {
    --font-family: 'Quicksand', sans-serif;

    /* Light Colors */
    --cl-bg: #e0ffdd;
    --cl-text: black;
    --cl-dec-text: black;
    --cl-box: #e7bb69;
    --cl-box-edge: #c19d59;
    --cl-box-ridge: #e1b768;
    --cl-label: white;
    --cl-lines: black;
    --cl-login-hover: rgba(255, 255, 255, 0.8);
    --cl-null-text: #9b9b9b;
    --cl-table-header: #d6f0a7;
    --cl-table-odd: #dadada;
    --cl-table-hover: #c6dc9e;
    --cl-back-button: rgba(0, 0, 0, 0.3);

    /* Dark Colors */
    --cd-bg: #111;
    --cd-text: #fff;
    --cd-dec-text: #9b9b9b;
    --cd-box: #262933;
    --cd-box-edge: #1a1a1a;
    --cd-box-ridge: #282b35;
    --cd-label: #222;
    --cd-lines: #4d4d4d;
    --cd-login-hover: rgba(0, 0, 0, 0.5);
    --cd-null-text: #9b9b9b;
    --cd-table-header: #314a48;
    --cd-table-odd: #2d2d2d;
    --cd-table-hover: #344543;
    --cd-back-button: rgba(255, 255, 255, 0.3);

    --c-loading: #d6d6d6;

    @media (prefers-color-scheme: light) {
        --c-bg: var(--cl-bg);
        --c-text: var(--cl-text);
        --c-dec-text: var(--cl-dec-text);
        --c-box: var(--cl-box);
        --c-box-edge: var(--cl-box-edge);
        --c-box-ridge: var(--cl-box-ridge);
        --c-label: var(--cl-label);
        --c-lines: var(--cl-lines);
        --c-login-hover: var(--cl-login-hover);
        --c-null-text: var(--cl-null-text);
        --c-table-header: var(--cl-table-header);
        --c-table-odd: var(--cl-table-odd);
        --c-table-hover: var(--cl-table-hover);
        --c-back-button: var(--cl-back-button);

        --p-theme-switch-0: 0;
        --p-theme-switch-1: 1;
    }

    @media (prefers-color-scheme: dark) {
        --c-bg: var(--cd-bg);
        --c-text: var(--cd-text);
        --c-dec-text: var(--cd-dec-text);
        --c-box: var(--cd-box);
        --c-box-edge: var(--cd-box-edge);
        --c-box-ridge: var(--cd-box-ridge);
        --c-label: var(--cd-label);
        --c-lines: var(--cd-lines);
        --c-login-hover: var(--cd-login-hover);
        --c-null-text: var(--cd-null-text);
        --c-table-header: var(--cd-table-header);
        --c-table-odd: var(--cd-table-odd);
        --c-table-hover: var(--cd-table-hover);
        --c-back-button: var(--cd-back-button);

        --p-theme-switch-0: 1;
        --p-theme-switch-1: 0;
    }
}

:root:has(#themeSwitch:checked) {
    /* Swapped light and dark themes. */

    @media (prefers-color-scheme: dark) {
        --c-bg: var(--cl-bg);
        --c-text: var(--cl-text);
        --c-dec-text: var(--cl-dec-text);
        --c-box: var(--cl-box);
        --c-box-edge: var(--cl-box-edge);
        --c-box-ridge: var(--cl-box-ridge);
        --c-label: var(--cl-label);
        --c-lines: var(--cl-lines);
        --c-login-hover: var(--cl-login-hover);
        --c-null-text: var(--cl-null-text);
        --c-table-header: var(--cl-table-header);
        --c-table-odd: var(--cl-table-odd);
        --c-table-hover: var(--cl-table-hover);
        --c-back-button: var(--cl-back-button);
    }

    @media (prefers-color-scheme: light) {
        --c-bg: var(--cd-bg);
        --c-text: var(--cd-text);
        --c-dec-text: var(--cd-dec-text);
        --c-box: var(--cd-box);
        --c-box-edge: var(--cd-box-edge);
        --c-box-ridge: var(--cd-box-ridge);
        --c-label: var(--cd-label);
        --c-lines: var(--cd-lines);
        --c-login-hover: var(--cd-login-hover);
        --c-null-text: var(--cd-null-text);
        --c-table-header: var(--cd-table-header);
        --c-table-odd: var(--cd-table-odd);
        --c-table-hover: var(--cd-table-hover);
        --c-back-button: var(--cd-back-button);
    }
}

html {
    width: 100%; height: 100%;
    font-family: var(--font-family);
    color: var(--c-text);
    overflow: hidden;

    @media (min-aspect-ratio: 100/135) { /* Wider */
        font-size: min(calc(100/135 * 1vh), 62.5%);
        /* Centered around the main box: packageLabel with net height/width 100/135 */
    }

    @media (max-aspect-ratio: 100/135) { /* longer */
        font-size: min(calc(100/100 * 1vw), 62.5%);
    }
}

body {
    width: 100vw; height: 100%;
    margin: 0 auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--c-bg);
}

#themeSwitchContainer {
    width: 10rem; height: 10rem;
    position: fixed;
    top: 0; left: 0;
    z-index: 5;
    user-select: none;

    --sun-color: #fffb15;
    --moon-color: #ffe598;

    @media (prefers-color-scheme: light) {
        --day-color: #a3e0ee;
        --night-color: #222;
    }

    @media (prefers-color-scheme: dark) {
        --night-color: #a3e0ee;
        --day-color: #222;
    }

    --w: 6deg;
    --spokes: 10;

    > input {
        width: 100%; height: 100%;
        position: absolute;
        opacity: 0;
        cursor: pointer;

        &:hover ~ span:nth-child(2) {
            filter: brightness(110%);
        }

        &:checked ~ span {
            &:nth-of-type(1) { background-color: var(--night-color); }
            &:nth-of-type(2) { opacity: var(--p-theme-switch-0); }
            &:nth-of-type(3) { opacity: var(--p-theme-switch-1); }
        }
    }

    > span {
        transition: opacity 0.15s ease-in-out;
        position: absolute;
        pointer-events: none;

        &:nth-of-type(1) {
            width: 100%; height: 100%;
            top: 0; left: 0;
            background-color: var(--day-color);
            filter: brightness(100%);
            transition: background-color 0.15s ease-in-out,
                        filter 0.15s ease-in-out;
        }

        &:nth-of-type(2) {
            width: 4rem; height: 4rem;
            position: absolute;
            top: 3rem; left: 3rem;
            background-color: var(--sun-color);
            border-radius: 50%;
            opacity: var(--p-theme-switch-1);

            &::before {
                content: "";
                width: 7rem; height: 7rem;
                position: absolute;
                top: -1.5rem; left: -1.5rem;
                border-radius: inherit;
                background-image: repeating-conic-gradient(
                    from calc(-1*var(--w)/2), var(--sun-color) 0 calc(var(--w) - 2deg),
                    transparent calc(var(--w)) calc(360deg/var(--spokes) - 2deg),
                    var(--sun-color) calc(360deg/var(--spokes))
                );
            }
        }

        &:nth-of-type(3) {
            width: 6rem; height: 6rem;
            top: 1.75rem; left: 1.75rem;
            background-color: var(--moon-color);
            border-radius: 50%;
            opacity: var(--p-theme-switch-0);
            mask-image: radial-gradient(circle, rgba(0,0,0,0) 33%, black 34%);
            mask-position: -3rem -3rem;
            mask-repeat: no-repeat;
            mask-size: 166.66% 166.66%;
        }
    }
}


#package {
    margin: auto;
    width: 298rem;
    height: 200rem;
    --spacing: 0.8rem;
    background: repeating-linear-gradient(90deg,
                                          var(--c-box) 0rem,
                                          var(--c-box) var(--spacing),
                                          var(--c-box-ridge) var(--spacing),
                                          var(--c-box-ridge) calc(2 *var(--spacing))
    );

    border: 1rem solid var(--c-box-edge);
    position: absolute;
    z-index: 1;
    user-select: none;

    > img {
        display: block;
        position: absolute;

        &:nth-of-type(1) {
            width: 30rem;
            top: 6rem; left: 263rem;
        }

        &:nth-of-type(2) {
            width: 30rem;
            top: 6rem; left: 228rem;
        }

        &:nth-of-type(3) {
            width: 35rem;
            top: 162rem; left: 257rem;
        }

        &:nth-of-type(4) {
            width: 25rem;
            top: 165rem; left: 10rem;
        }
    }
}

#packageTape {
    margin: auto;
    height: 30rem;
    position: absolute;
    z-index: 1;

    > text {
        font: 1.5px var(--font-family);
        fill: rgba(255, 255, 255, 0.4);
        user-select: none;
    }
}

#packageLabel {
    width: 80rem;
    height: 115rem;

    outline-width: 5rem;
    outline-style: solid;
    outline-color: var(--c-label);

    border-radius: 12px;
    background-color: var(--c-label);
    border: 0.5rem solid var(--c-lines);

    transition: background-color 0.15s ease-in-out,
                border 0.15s ease-in-out,
                outline-color 0.15s ease-in-out;

    display: grid;
    grid-template-rows: 2fr 1fr 7fr 2fr;

    z-index: 2;

    svg {
        fill: var(--c-dec-text);
    }
}

#packageLabelTop {
    display: grid;
    grid-template-columns: 1fr 3fr;
    border-bottom: 0.5rem solid var(--c-lines);

    > div:nth-of-type(1) {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 0.5rem solid var(--c-lines);

        > svg {
            width: 80%; height: 80%;
        }
    }

    > div:nth-of-type(2) {
        padding: 3%;
        display: grid;
        grid-template-rows: 1fr 1fr;

        > div:nth-of-type(1) {
            display: block;
            color: var(--c-dec-text);
            user-select: none;

            > p {
                margin: 0;
                font-size: 150%;

                &:nth-of-type(1) { display: inline-block; }
                &:nth-of-type(2) {
                    display: inline-block;
                    float: right;
                }

            }
        }

        > div:nth-of-type(2) {
            width: 80%;
            position: relative;

            > svg {
                position: absolute;
                left: 0; top: 0;
                width: 35rem; height: 7rem;
                pointer-events: none;
            }
        }
    }
}

#login {
    display: block;
    margin: 0;
    width: 24.8rem; height: 7rem;
    line-height: 7rem;
    position: relative;
    left: 5rem;

    font-size: 6rem;
    font-family: 'Courier';
    font-weight: 800;
    text-align: center;

    transition: background 0.15s ease-in-out,
                color 0.15s ease-in-out;

    z-index: 4;
    cursor: pointer;
    user-select: none;
}

#packageLabelTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0.5rem solid var(--c-lines);
    user-select: none;

    > h1 {
        margin: 1%;
        font-size: 430%;
    }
}

@keyframes cursorWait {
    0% { content: "█"; }
    50% { content: ""; }
    100% { content: "█"; }
}

@keyframes rotate {
    to { --angle: 360deg; }
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

#packageLabelContent {
    border-bottom: 0.5rem solid var(--c-lines);
    font-size: 150%;
    font-family: 'Courier';

    > h1 {
        padding: 7%;
        margin: 0;
        line-height: 100%;
        color: var(--c-lines);
    }

    > h1::after {
        animation: 1.5s infinite normal cursorWait;
        content: "hello";
    }
}

#packageLabelBot {
    display: grid;
    grid-template-rows: 6fr 1fr;

    > svg {
        margin: 3% auto 0 auto;
        width: 80%; height: 85%;
    }

    > a {
        margin: auto;
        margin-bottom: 1%;
        font-size: 2rem;
        color: var(--c-dec-text);
        text-decoration: none;
        transition: filter 0.15s ease-in-out;
        filter: brightness(100%);

        &:hover { filter: brightness(120%); }
    }
}

body { /* Default no authentication */
    #packageLabelTitle > h1::before { content: "PRIORITY PACKAGING" }

    #packageLabelContent > div { display: none; }

    #login {
        background: var(--c-label);
        color: var(--c-text);

        &::before { content: "LOGIN"; }
        &:hover { background-color: var(--c-login-hover); }
    }
}

body.{{ state.auth }} {
    #packageLabelTitle h1::before { content: "PACKAGE INFO" }

    #packageLabelContent {
        > div { display: block; }
        > h1 { display: none; }
    }

    #login {
        color: transparent;
        background:transparent;

        &::before { content: "LOGOUT"; }
        &:hover {
            background: var(--c-label);
            color: var(--c-text);
        }
    }
}