@font-face { font-family: "SF Pro Display Light"; src: url("assets/fonts/sf-pro-display-light.woff2"); }
@font-face { font-family: "SF Pro Display Regular"; src: url("assets/fonts/sf-pro-display-regular.woff2"); }
@font-face { font-family: "SF Pro Display Semibold"; src: url("assets/fonts/sf-pro-display-semibold.woff2"); }

/* disable default input styling, text selection, & scrolling */
* {
    overflow: hidden;
    overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    select, input {
        border: none;
        outline: none;
        background: none;
    }
}

html {
    height: 100vh;
    width: 100vw;
}

body {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0;
}

#modals {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;

    #ticket {
        --height: unset;
        --width: unset;
        --top: unset;
        --pad: calc(var(--height) * 0.05);
        --clr: #111;

        position: absolute;
        height: var(--height);
        width: var(--width);
        top: var(--top);
        padding: var(--pad);
        display: flex;
        flex-direction: column;
        font-family: "SF Pro Display Light";
        overflow: visible;
        z-index: 9;
        color: var(--clr);
        box-sizing: border-box;
        container-type: size;

        #header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: fit-content;
            margin-bottom: 7.64cqh;

            #expiration-time,
            #expiration-date {
                font-size: 5.23cqh;
            }
        }

        #body {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: var(--pad);

            #service {
                display: flex;
                flex-direction: column;

                #identifier {
                    font-family: "SF Pro Display Regular";
                    font-size: 39.6cqh;
                }

                #zone {
                    font-family: "SF Pro Display Regular";
                    font-size: 5.23cqh;
                    margin-bottom: 0.5cqh;
                    letter-spacing: 0.14cqh;
                }

                #route {
                    display: flex;
                    flex-direction: row;

                    #origin,
                    #placeholder,
                    #destination {
                        font-family: "SF Pro Display Regular";
                        padding: 0;
                        appearance: none;
                        font-size: 7cqh;
                        color: var(--clr);
                        letter-spacing: 0.14cqh;
                    }

                    #arrow {
                        align-self: center;
                        font-size: var(--pad);
                        margin: 0 1cqh 0 1.3cqh;
                        color: #8e8f9b;
                    }
                }

                #name {
                    font-family: "SF Pro Display Regular";
                    font-size: 3.82cqh;
                    letter-spacing: 0.14cqh;
                }
            }

            #security {
                display: flex;
                flex-direction: column;

                #daily-code {
                    font-family: "SF Pro Display Semibold";
                    padding: 0;
                    appearance: none;
                    height: 14.7cqh;
                    width: 20.9cqh;
                    font-size: 12.7cqh;
                    color: #fff;
                    border-radius: 1.4cqh;
                    background-color: #912e3b;
                    text-align: center;
                    text-transform: uppercase;
                }

                #qr-code {
                    position: relative;
                    margin-top: var(--pad);
                    height: 20.9cqh;
                    width: 20.9cqh;

                    img {
                        height: 100%;
                        width: 100%;
                        position: absolute;
                        margin: 0;
                        padding: 0;
                    }
                }
            }
        }

        /* The close button. */
        &::after {
            content: "CLOSE";
            position: absolute;
            top: -5.17cqh;
            right: -9cqh;
            font-family: 'SF Pro Display Regular';
            font-size: 4cqh;
            color: var(--clr);
            letter-spacing: 0.14cqh;
        }
    }
}

#canvas {
    height: 100%;
    width: 100%;

    > * {
        height: 100%;
        width: 100%;
        position: fixed;
        left: 0;
        background-size: auto 100%;
        background-repeat: repeat-x;
        background-position: 0 0;
        will-change: background-position;
    }
    #foreground {
        z-index: 8;
        top: 50%;
        left: 50%;
        width: auto;
        display: block;
        transform: translate(-50%, -50%);
    }
    #background {
        z-index: 1;
        background-image: url("assets/images/canvas/background-light.svg");
        background-size: auto 100%;
    }
}

/* dark theme overrides */
[data-theme='dark'] {
    #ticket {
        &::after { color: #fff !important; }
    }
    #canvas {
        #clouds { background-image: url("assets/images/canvas/clouds-dark.svg") !important; }
        #background { background-image: url("assets/images/canvas/background-dark.svg") !important; }
    }
}