@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

:root {
    color-scheme: light dark;
    --fg: light-dark(black, white);
    --bg: light-dark(white, #222);
    --acc: #0099ff;
    --highlight: light-dark(lightgray, #444);

    --success: rgb(51, 176, 51);
    --error: rgb(203, 44, 44);
}

* {
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}

body {
    background: radial-gradient(circle at center 200%, var(--acc) 30%, var(--bg));
    --margin: 0.5em;
    font-family: "Titillium Web", sans-serif;
    font-size: 12px;
    color: var(--fg);
    margin: var(--margin);
    min-height: calc(100vh - 2 * var(--margin));
}

h1, h2, h3, h4, .accent, a, .clickable {
    color: var(--acc);
}

#main-wrapper {
    max-width: calc(1920px * 2 / 3);
    margin-inline: auto;
    padding-inline: 1em;
}

.flex-right, .flex-down {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;

    &.flex-right{ flex-direction: row; }
    &.flex-down{ flex-direction: column; }

    &.center {
        justify-content: center;
    }
    &.middle {
        align-items: center;
    }
    &.stretch {
        justify-content: space-between;
        & > :first-child {
            flex-grow: 1;
        }
    }
    &.nowrap {
        flex-wrap: nowrap;
    }
}
.grid {
    display: grid;
    gap: 0.5em;

    grid-template-columns: repeat(var(--col-count), 1fr);
}

.ghost {
    opacity: 0.5;
}

.hidden {
    display: none !important;
}

.success {
    color: var(--success) !important;
}
.danger, .error {
    color: var(--error) !important;
}

.clickable, .button, button {
    cursor: pointer;
    user-select: none;
}

img.inline {
    display: inline;
    height: 1em;
}
img.thumbnail {
    max-height: 10em;
}

.top-bar {
    align-items: center;
    gap: 1em;

    & > div {
        gap: 0;
    }
}

.table {
    display: grid;
    margin-block: 1em;
    gap: 0 1em;
    width: 100%;

    & * {
        align-content: center;
    }

    & span:hover & {
        background-color: var(--highlight);
    }

    & hr {
        grid-column: 1 / span var(--col-count);
        width: 100%;
    }

    & .head {
        font-weight: bold;
    }
}

.gallery {
    & img {
        max-height: 10em;
    }
}

.variant-tile, .size-tile {
    --dim: 1em;

    width: var(--dim);
    height: var(--dim);
    border: 1px solid var(--fg);
    border-radius: 0.25em;
    background-color: var(--tile-color);

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    text-align: center;

    user-select: none;
    overflow: hidden;

    &.size-tile {
        width: calc(2 * var(--dim));
        text-align: center;
        font-weight: bold;
    }
}

.scrollable {
    overflow: auto;
    max-height: 70vh;

    &.horizontally {
        max-width: 30vw;
        margin: 0 auto;
    }
}

ul[role="specification"] {
    &, & ul {
        padding-left: 2em;
    }
}

/************** building blocks ********************/

header > *, footer > * {
    margin: 0;
}
footer > span {
    display: flex;
    flex-direction: row;
    gap: var(--padding);

    --padding: 0.25em;

    & > * {
        padding-right: var(--padding);
        border-right: 1px solid var(--highlight);

        &:last-child {
            border-right: none;
        }
    }
}


.input-container {
    display: flex;
    flex-direction: column;

    &.inline {
        flex-direction: row-reverse;
        justify-content: left;
    }
}

input, select, textarea {
    font-family: inherit;
    font-size: 1em;
    border: 2px solid var(--highlight);
    background-color: var(--bg);
    accent-color: var(--acc);

    &:disabled {
        background-color: var(--highlight);
        opacity: 0.5;
    }

    &[type="color"] {
        height: 4em;
        width: 10em;
    }
}

button, .button {
    font-size: 1em;
    border: 2px solid var(--highlight);
    color: var(--acc);
    background-color: var(--bg);

    text-decoration: none;

    &.small {
        padding: 0 0.25em;
    }

    &:hover {
        color: var(--bg) !important;
        background-color: var(--acc);

        &.danger {
            background-color: var(--error);
        }
    }
    &.active {
        border-color: var(--acc);
    }
    &:disabled {
        background-color: var(--highlight);
        color: var(--fg) !important;
        opacity: 0.5;
        cursor: not-allowed;
    }
}

section > .flex-right:first-child {
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid var(--highlight);

    & > h2 {
        margin: 0;
    }
}

.choices__inner, .choices__list, .choices__input {
    background-color: var(--bg) !important
}
.choices__inner {
    width: 15em !important;
    min-height: unset !important;
}
.choices__item.is-highlighted {
    background-color: var(--acc) !important;
}

.logs pre {
    overflow: auto;
    max-width: 50em;
}

/************** distinguishing elements ********************/

/* blockiness */
.section,
header, footer, section {
    box-shadow: 0 0.5em 0.5em #00000044;
    padding: 1em;
    border: 2px solid var(--highlight);
    background-color: var(--bg);
}

/* roundness */
.rounded,
.section, header, footer, section,
input, select, textarea,
button, .button {
    border-radius: 0.5em;
}

/* spaciness */
.padded,
.section, header, footer, section,
input, select, textarea,
button, .button {
    padding: 0.5em 1em;
}

/************** mobile view ********************/

@media only screen and (max-width: 600px) {
    .flex-right, .flex-down, .grid {
        display: flex;
        flex-direction: column;
    }
}