:root {
    --shadow-10: 0 1px 4px rgba(12, 12, 13, 0.1);
    --shadow-20: 0 2px 8px rgba(12, 12, 13, 0.1);
    --shadow-30: 0 4px 16px rgba(12, 12, 13, 0.1);

    --focus-border-color: var(--blue-50);

    --box-background: var(--white-100);
    --box-color: var(--grey-90);

    --focus-box-shadow: 0 0 0 1px var(--focus-border-color);

    --button-background: var(--grey-90-a10);
    --button-background-hover: var(--grey-90-a20);
    --button-background-active: var(--grey-90-a30);
    --button-background-primary: var(--blue-60);
    --button-background-primary-hover: var(--blue-70);
    --button-background-primary-active: var(--blue-80);
    --button-color: var(--grey-90);
    --button-color-primary: var(--white-100);

    --field-background: var(--box-background);
    --field-color: var(--box-color);
    --field-placeholder-color: var(--grey-50);
    --field-border-color: var(--grey-90-a20);
    --field-border-color-hover: var(--grey-90-a30);

    --field-box-shadow-warning: 0 0 0 1px var(--yellow-60),
        0 0 0 4px var(--yellow-60-a30);
    --field-box-shadow-error: 0 0 0 1px var(--red-60),
        0 0 0 4px var(--red-60-a30);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --box-background: rgb(35, 34, 43);
        --box-color: var(--white-100);

        --button-background: rgb(71, 70, 79);
        --button-background-hover: rgb(80, 79, 88);
        --button-background-active: rgb(92, 91, 100);
        --button-color: var(--white-100);

        --field-placeholder-color: var(--grey-30);
        --field-border-color: var(--grey-10-a20);
        --field-border-color-hover: var(--grey-10-a30);
    }
}

button,
input,
textarea,
select {
    border: 1px solid transparent;
    border-radius: 2px;
}

button,
select {
    background-color: var(--button-background);
    color: var(--button-color);
}
button:not(:disabled):hover,
select:not(:disabled):hover {
    background-color: var(--button-background-hover);
}
button:not(:disabled):active,
select:not(:disabled):hover:active {
    background-color: var(--button-background-active);
}

input,
textarea {
    background-color: var(--field-background);
    border: 1px solid var(--field-border-color);
    color: var(--field-color);
}

input:hover,
textarea:hover {
    border-color: var(--field-border-color-hover);
}

:-moz-any(button, input, textarea, select):focus {
    border-color: var(--focus-border-color) !important;
    box-shadow: var(--focus-box-shadow);
    outline: initial;
}

:-moz-any(button, input, textarea, select):focus::-moz-focus-inner {
    border: initial;
}

input:invalid,
textarea:invalid {
    box-shadow: var(--field-box-shadow-error) !important;
    border-color: var(--red-60) !important;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.35;
}

button,
input,
textarea,
select {
    padding: 4px 8px;
    font: inherit;
}

/* No inset for spinbox control */
input[type="number"] {
    padding-inline-end: 2px;
}

button:default {
    background-color: var(--button-background-primary);
    color: white !important;
}
button:default:hover {
    background-color: var(--button-background-primary-hover);
}
button:default:hover:active {
    background-color: var(--button-background-primary-active);
}

.select-wrapper {
    --arrow-width: 16px;
    position: relative;
    display: inline-block;
}
.select-wrapper::after {
    align-items: center;
    content: "▼";
    opacity: 0.5;
    display: flex;
    height: 100%;
    margin-right: 4px;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--arrow-width);
}
.select-wrapper--disabled::after {
    opacity: 0.25;
}
select {
    -moz-appearance: none;
    padding-right: calc(8px + var(--arrow-width));
}

option:disabled {
    opacity: 0.35;
}