: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;

    /* 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;

    --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);

        --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);

        --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);
    }

    @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);
    }
}

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;
    }

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

    span:nth-child(2) {
        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;
    }

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

    span:nth-child(3)::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))
        );
    }

    span:nth-child(4) {
        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%;
    }

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

    input:checked ~ span:nth-child(2) {
        background-color: var(--night-color);
    }

    input:checked ~ span:nth-child(3) {
        opacity: var(--p-theme-switch-0);
    }

    input:checked ~ span:nth-child(4) {
        opacity: var(--p-theme-switch-1);
    }
}


#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-child(1) {
        width: 30rem;
        top: 6rem; left: 263rem;
    }

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

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

    :nth-child(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-child(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-child(2) {
        padding: 3%;
        display: grid;
        grid-template-rows: 1fr 1fr;

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

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

            p:nth-child(1) {
                display: inline-block;
            }

            p:nth-child(2) {
                display: inline-block;
                float: right;
            }
        }

        > div:nth-child(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";
    }

    > div:nth-child(2) {
        padding: 7% 7% 0 7%;
        color: var(--c-text);
    }

    h1 {
        margin: 0;
        line-height: 100%;
    }

    input {
        background: none;
        color: var(--c-text);
        border: 1px solid var(--c-lines);
        padding: 2%;
        margin: 2% 0 2% 0;
        font-size: 150%;
        font-family: 'Courier';
    }

    input.{{ state.error }} {
        outline: 2px solid red !important;
    }

    input[type=submit] {
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;
    }

    /* Button enabled/disabled. */
    input[type=submit] {
        color: var(--c-null-text);
        border-style: dashed;
        pointer-events: none;
    }

    input[type=submit].{{ state.button_on }} {
        color: var(--c-text);
        border-style: solid;
        pointer-events: auto;
    }

    input[type=submit]:hover {
        background-color: var(--c-login-hover);
    }

    input:focus {
        outline: none;
    }

    input[type=submit].{{ state.loading }} {
        border: 1px solid transparent;
        background: linear-gradient(var(--c-label), var(--c-label)) padding-box, conic-gradient(
                        from var(--angle),
                        var(--c-lines) 0% 30%,
                        var(--c-loading) 30% 50%,
                        var(--c-lines) 50% 80%,
                        var(--c-loading) 80% 100%
                    ) border-box;
        animation: 1.5s rotate linear infinite;
        cursor: not-allowed;
    }

    #repoSelect {
        border-bottom: 2px solid var(--c-lines);

        #repoSelectInput {
            margin-bottom: 0;
        }

        #repoSelectButton {
            float: right;
        }

        #repoSelectError {
            line-height: 100%;
            height: 3rem;
            margin: 2% 0 2% 0;
        }
    }

    #repoInfo {
        margin-top: 2%;
        transition: opacity 0.15s ease-in-out;

        > h1:first-child {
            margin-top: 4%;
        }

        #repoActions {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        #repoLinkInput::selection {
            background-color: transparent;
        }

        #repoLinkButton {
            float: right;
        }

        #repoFeatures {
            margin-top: 2%;
            transition: opacity 0.15s ease-in-out;

            #featureBox {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;
                align-items: center;

                .feature {
                    margin-right: 2%;
                    font-weight: 800;
                    pointer-events: auto;
                }

                /* Feature states. */
                .feature {
                    color: var(--c-null-text);
                    border-style: dashed;
                }

                .feature.{{ state.feature_on }} {
                    color: var(--c-text);
                    border-style: solid;

                }
            }
        }
    }

    #confirmOverlay {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);

        position: absolute;
        left: 0;
        z-index: 10;

        transition: opacity 0.15s ease-in-out;

        > div {
            margin: 30% auto 0 auto;

            width: 80rem;
            height: 30rem;

            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;

            > div {
                padding: 7%;

                input[type=submit] {
                    float: right;
                }
            }
        }
    }

    #confirmOverlay {
        pointer-events: none;
        top: 100%;
        opacity: 0;
    }

    #confirmOverlay.{{ state.confirm_on }} {
        pointer-events: auto;
        top: 0;
        opacity: 1;
    }

    /* Repo selected and created states. */
    #repoInfo, #repoFeatures {
        opacity: 0;
    }

    #repoInfo.{{ state.repo_selected }}, #repoFeatures.{{ state.repo_created }} {
        opacity: 1
    }
}

#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%);
    }

    a: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);
    }

    #login::before {
        content: "LOGIN";
    }

    #login:hover {
        background-color: var(--c-login-hover);
    }
}

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

    #packageLabelContent > div {
        display: block;
    }

    #packageLabelContent > h1 {
        display: none;
    }

    #login {
        color: transparent;
        background:transparent;
    }

    #login::before {
        content: "LOGOUT";
    }

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