/*
 * A change to how CSS transitions are inherited, so that duration and
 * timing-function flow through the hierarchy with minimal effort
 *
 * Normally the addition of any transition style enables 'all'
 * properties.
 */

* {
    transition-property: none;
    transition-duration: inherit;
    transition-timing-function: inherit;
}

:root {
    transition-duration: 0.2s;
}

body.application {
    font-size: 22.01px;
}

@media (max-width: 660px) {
    body.application {
        font-size: 18.01px;
    }
}

[hidden],
.template {
    display: none !important; /* not overriden by other display: styles */
}

dialog {
    border: none;
    color: unset;
    box-sizing: border-box;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-width: unset;
    max-height: unset;
    background: inherit;
}

.modal {
    display: flex;
    flex-direction: column;
    padding: min(5vh, 10%);
    gap: 5vh;
    align-items: center;
    justify-content: space-around;
}

.modal .company-logo,
.modal .qr {
    width: 100%;
    max-width: 320px;
}

.modal form {
    align-items: center;
}

form {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

input:not([type]),
input[type=password],
select {
    color: inherit;
    border: 1px solid;
    background: transparent;
}

select option {
    color: white;
    background: black;
}

button {
    color: white;
    transition: colour;
    background: rgba(var(--button-background), 1.0);
    --button-background: 0, 107, 255;
    overflow: clip;
}

button:not(:hover) {
    background: rgba(var(--button-background), 0.8);
}

input:not([type]),
input[type=password],
select,
button {
    padding: 0.5em 0.6em;
    border-radius: 0.5em;
}

button {
    text-transform: uppercase;
    font-weight: bold;
    border: none;
}

.qr {
    aspect-ratio: 1;
    display: flex;  /* no padding below */
    background: white;
}

.counter {
    font-feature-settings: "tnum";  /* fixed-width integers */
}

.url {
    overflow-x: auto;
    text-wrap-mode: nowrap;
}

.head-up-display {
    position: sticky;
    background-color: var(--page-background);
    z-index: 1;
    top: 0;
    box-shadow: 0 10px 10px var(--page-background);
}

.traffic-light {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: orange;
    transition-property: background-color;
}

.traffic-light.good {
    background-color: green;
}

.traffic-light.bad {
    background-color: red;
}