:root {
    --gap-y: 10px;
    --gap-x: 15px;
    --gap: var(--gap-y) var(--gap-x);
    --space-within: var(--gap);
    --button-padding: 8px 6px;
    --compensate-button-padding: 0px -6px;
    --body-background: rgb(255, 255, 255);
    --toolbar-background: rgb(241, 242, 242);
    --toolbar-border-color: rgb(230, 230, 230);
    --list-background: rgb(255, 255, 255);
    --list-border: 1px solid rgb(215, 215, 215);
    --text: rgb(39, 39, 39);
    --border-color: rgb(232, 235, 236);
    --corners: 8px;
    --border: 1px solid var(--border-color);
    --picked-value: var(--border-color);
    --picked-value-active: rgb(200, 203, 204);
    --active-navigation-link: rgb(12, 103, 218);
    --active-navigation-link-text: rgb(255, 255, 255);
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-background: rgb(45, 50, 54);
        --toolbar-background: rgb(58, 59, 59);
        --toolbar-border-color: rgb(96, 96, 96);
        --list-background: rgb(34, 36, 37);
        --list-border: 1px solid rgb(0, 0, 0);
        --text: rgb(235, 235, 235);
        --border-color: rgb(64, 65, 65);
        --picked-value-active: rgb(94, 97, 97);
        --active-navigation-link-text: var(--text);
        --active-navigation-link: rgb(8, 92, 202);
    }
}

body {
    background-color: var(--body-background);
    color: var(--text);
    font-family: system-ui;
    height: 100vh;
    margin: 0;
    width: 100vw;
}

.vertical-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vertical-stack > .view:last-child,
.vertical-stack > .view:last-child > * {
    height: 100%;
    overflow: clip;
}

.horizontal-stack {
    width: 100%;
}

.horizontal-stack > .view:last-child,
.horizontal-stack > .view:last-child > * {
    width: 100%;
}

.horizontal-stack, header {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
}

header {
    background-color: var(--toolbar-background);
    min-height: 40px;
    overflow-x: scroll;
    padding: var(--space-within);
}

header .leading, header .label, header .trailing {
    align-self: center;
}

header .label {
    font-weight: 500;
}

header .trailing {
    margin-left: auto;
}

header .trailing > .horizontal-stack > .view {
    align-self: center;
}

header:first-child {
    border-bottom: var(--border);
    border-color: var(--toolbar-border-color);
}

.picker {
    display: flex;
    border: var(--border);
    border-radius: var(--corners);
}

.picker.disabled a {
    pointer-events: none;
    opacity: 0.2;
}

.picker:not(.disabled):hover {
    background-color: var(--border-color);
}

.horizontal-stack > .view > .picker {
    flex-direction: row;
}

.vertical-stack > .view > .picker {
    flex-direction: column;
}

.picker > .value {
    padding: var(--button-padding);
    margin: var(--compensate-button-padding);
}

.picker:not(.disabled) > .selected .button {
    background-color: var(--picked-value);
}

.picker:not(.disabled):hover > .selected .button {
    background-color: var(--picked-value-active);
}

.picker .button {
    border: none;
    display: inline;
}

.button {
    border: var(--border);
    border-radius: var(--corners);
    color: var(--text);
    display: inline-block;
    text-decoration: none;
    text-wrap: nowrap;
    padding: var(--button-padding);
}

.button:hover {
    background-color: var(--border-color);
}

ul {
    background-color: var(--list-background);
    height: calc(100% - calc(var(--gap-y) * 2));
    list-style: none;
    margin: 0;
    overflow: scroll;
    padding: var(--space-within);
}

.horizontal-stack:has(> .view > ul):has(> .view > .scrollview) {
    gap: 0;
}

.horizontal-stack:has(> .view > ul):has(> .view > .scrollview) > .view:first-child > ul {
    border-right: var(--list-border);
}

.horizontal-stack:has(> .view > ul):has(> .view > .scrollview) > .view:last-child > ul {
    border-left: var(--list-border);
}

.navigation-link {
    color: var(--text);
    border-radius: var(--corners);
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

.navigation-link.selected {
    background-color: var(--active-navigation-link);
    color: var(--active-navigation-link-text);
}

.view:has(> .scrollview) {
    overflow: scroll;
}

.center {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

.center .horizontal-stack {
    align-items: center;
    justify-content: center;
}

.center .horizontal-stack .view:last-child {
    width: auto;
}

.view:last-child > .grid {
    overflow-y: scroll;
}

.grid {
    align-content: flex-start;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap-y)*2) calc(var(--gap-x)*2);
    overflow-y: scroll;
    padding: var(--gap);
}

.card {
    border: var(--border);
    border-radius: var(--corners);
    padding: var(--gap);
    text-align: center;
    width: min-content;
}

.card > .center > .navigation-link {
    padding: 0;
}

.shape.cornered > * {
    border-radius: var(--corners);
}

.shape.circle > * {
    border-radius: 50%;
}