:root {
    --color-0: #060606;
    --color-1: #191919;
    --color-2: #222;
    --color-3: #333;
    --color-4: #444;
    --color-5: #555;
    --color-6: #666;
    --color-7: #777;
    --color-8: #888;
    --color-9: #999;
    --color-10: #aaa;
    --color-11: #bbb;
    --color-12: #ccc;
    --color-13: #ddd;
    --color-14: #eee;
    --color-15: #fff;
    
    --color-primary: #55a;
    --color-dangerous: #944;
    --color-accent: #f96;
    
    --border-radius: .125em;
    --border-radius-button: 10em;
    
    --page-transition-duration: 0ms;
    --page-transition-duration-short: 0ms;
    --page-transition-duration-long: 0ms;
    
    &:has(body.animations) {
        --page-transition-duration: 100ms;
        --page-transition-duration-short: 50ms;
        --page-transition-duration-long: 150ms;
    }
}

@font-face {
    font-family: rubik;
    src: url(res/rubik.ttf);
}

@font-face {
    font-family: dejavu;
    src: url(res/dejavu.ttf);
}

::-webkit-scrollbar { width: .175em; height: .175em; }
::-webkit-scrollbar-track { background: var(--color-3) }
::-webkit-scrollbar-thumb { background: var(--color-5) }
::-webkit-scrollbar-thumb:hover { background: var(--color-7) }
::-webkit-scrollbar-corner { background: transparent }

html, body {
    height: 100dvh;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-1);
}

body,
label, input, textarea, button {
    font-family: rubik, sans-serif;
    font-size: 1em;
    line-height: 1.5;
    color: var(--color-14);
}

nav li, button, input.select, .overlay .item {
    cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.5em;
}

#queue-running-indicator {
    position: fixed;
    pointer-events: none;
}

h1::before {
    content: '';
    display: inline-block;
    background-image: url(res/loading.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
    height: 1em;
    transition: var(--page-transition-duration-long);
    margin-right: 0;
    width: 0;
    opacity: 0;
    translate: 0 .125em;
}

body:has(#queue-running-indicator.visible) h1::before {
    margin-right: .25em;
    width: 1em;
    opacity: 1;
}

body:has(#queue-running-indicator.visible):has(#page.fadeout) h1::before {
    opacity: 0;
}

#app {
    display: flex;
    min-height: 100%;
}

nav {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-2);
    overflow: auto;
    
    ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        padding: 2em .5em;
        margin: 0;
        gap: .25em;
        height: 100%;
    }
    
    li {
        user-select: none;
        padding: .375em 1em;
        border-radius: var(--border-radius);
        
        &:hover {
            background-color: var(--color-3);
        }
        
        &:active, &.active {
            background-color: var(--color-4);
        }
    }
}

#main {
    overflow: hidden;
    display: flex;
    flex: 1;
}

#page {
    transition: var(--page-transition-duration);
    opacity: 0;
    overflow: auto;
    flex: 1;
    padding: 0 2.5em 2.5em;
    
    &.visible {
        opacity: 1;
    }
    
    &.fadeout {
        opacity: 0;
    }
    
    h1, h2, h3 {
        margin-block: 1em .5em;
    }
}

.fields {
    display: flex;
    flex-direction: column;
    gap: .5em;
    
    .field {
        display: flex;
        align-items: center;
        max-width: 40em;
        gap: .5em;
        
        label:has(+ input) {
            flex: 0 0 10em;
            margin-right: .25em;
            text-align: right;
        }
        
        label + * {
            width: 100%;
        }
    }
}

.hidden {
    display: none !important;
}

.loading {
    opacity: 0;
    translate: 1em 0;
    margin-right: 1.25em;
    transition:
        opacity var(--page-transition-duration),
        translate var(--page-transition-duration),
        margin-right var(--page-transition-duration);
    
    &.loaded {
        opacity: 1;
        translate: 0 0;
        margin-right: unset;
    }
}

a {
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
    
    &:hover {
        text-decoration: underline;
    }
}

input, textarea, button {
    color: var(--color-14);
    outline: none;
    min-width: 0;
    
    &[disabled]:not(.loading),
    &[disabled].loaded {
        opacity: .5;
        pointer-events: none;
    }
}

input, textarea {
    background-color: var(--color-3);
    border: none;
    padding: .325em .5em;
    border-radius: var(--border-radius);
    
    &.select {
        
        &:hover {
            background-color: var(--color-4);
        }
    }
}

input:focus {
    background-color: var(--color-4);
}

input[type="checkbox"] {
    width: 1.25em;
    height: 1.25em;
}

textarea {
    resize: none;
    min-height: 6em;
    transition: var(--page-transition-duration);
}

textarea:focus {
    filter: brightness(1.1);
}

button {
    background-color: var(--color-5);
    border: none;
    padding: .325em .875em;
    filter: brightness(.9);
    border-radius: var(--border-radius-button);
    
    &:not([disabled]):hover {
        filter: brightness(1);
    }
    
    &:not([disabled]):active {
        filter: brightness(1.15);
    }
    
    &[style] {
        padding-left: 1.5em;
        background-repeat: no-repeat;
        background-size: 1.25em;
        background-position: .5em center;
    }
    
    &.primary {
        background-color: var(--color-primary);
    }
    
    &.dangerous {
        background-color: var(--color-dangerous);
    }
}

pre {
    font-family: dejavu;
    font-size: .95em;
    padding: 0;
    margin: 0;
}

.overlay,
.overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.overlay-backdrop {
    backdrop-filter: brightness(.5) contrast(.9) saturate(1.25);
    opacity: 0;
    transition: var(--page-transition-duration-long);
}

body:has(.overlay:not(.no-backdrop)) .overlay-backdrop {
    opacity: 1;
    pointer-events: unset;
}

.overlay {
    
    .box {
        outline: .075em solid var(--color-5);
        background-color: var(--color-1);
        box-shadow: 0 1em 6em -5em var(--color-0);
        display: flex;
        flex-direction: column;
        scale: 1.1;
        opacity: 0;
        transition: var(--page-transition-duration);
        max-height: calc(100% - 2em);
        max-width: calc(100% - 2em);
        overflow: auto;
        border-radius: var(--border-radius);
        
        .content {
            flex: 1;
            padding-block: .375em;
            
            .item {
                padding: .175em 1.5em .175em .75em;
                white-space: nowrap;
                
                &:hover {
                    background-color: var(--color-4);
                }
                
                &.selected {
                    background-color: var(--color-5);
                }
                
                &.disabled {
                    color: var(--color-8);
                }
            }
            
            .item[style] {
                padding-left: 2.125em;
                background-repeat: no-repeat;
                background-size: 1.125em;
                background-position: .5em center;
            }
            
            .separator {
                border-bottom: .075em solid var(--color-5);
                margin: .25em .375em;
            }
        }
    }
    
    &.no-backdrop .box {
        box-shadow: 0 .75em 3.25em -2.25em var(--color-0);
    }
    
    &.visible {
        opacity: 1;
        pointer-events: unset;
        
        .box {
            scale: 1;
            opacity: 1;
        }
    }
}

.overlay.dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    
    .content:has(.title) {
        padding: 1em 1.5em;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5em;
    }
    
    .title {
        font-size: 1.5em;
    }
    
    .text {
        padding: .25em 0 .75em;
        text-align: center;
    }
    
    .buttons {
        display: flex;
        gap: .5em;
        justify-content: center;
    }
}

.overlay.context-menu {
    
    .box {
        position: absolute;
        transform-origin: left top;
        transition: var(--page-transition-duration-short);
    }
    
    &:not(.visible) .box {
        scale: 1 .75;
    }
}

input:has(+ button) {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

input + button {
    border-radius: 0 calc(var(--border-radius) * 4) calc(var(--border-radius) * 4) 0;
    padding-inline: .675em .75em;
}