:root {
    --width-input-border: 2px;
    --width-input-outline: 1px;
    --radius-inputs: 0.35rem;
    --padding-inputs-side: 0.6rem;
    --padding-inputs: 0.3rem var(--padding-inputs-side) 0.3rem var(--padding-inputs-side);
    --padding-buttons: 0.3rem 1rem 0.3rem 1rem;
    --border-inset: var(--shadow-primary) var(--highlight-primary) var(--highlight-primary) var(--shadow-primary);
    --border-raised: var(--highlight-primary) var(--shadow-primary) var(--shadow-primary) var(--highlight-primary);
    --background-gloss: linear-gradient(180deg, var(--control-bg-raised-highlight) 0% 50%, transparent 50% 100%);
}

select,
textarea,
input[type="text"] {
    padding: var(--padding-inputs);
    border-width: var(--width-input-border);
    border-style: solid;
    border-radius: var(--radius-inputs);
    box-shadow: 0 0 0 1px var(--control-border);
    max-width: 100%;
    margin: 1px;
}

select[multiple], textarea, input[type="text"] {
    border-color: var(--border-inset);
    background-color: var(--control-bg-inset);
    transition: background-color var(--hover-out-animation-len);
}

select:not([multiple]) {
    border-color: var(--border-raised);
    background-color: var(--control-bg-raised);
    background-image: var(--background-gloss);
    transition: background-color var(--hover-out-animation-len);
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    width: 1.4em;
    height: 1.4em;
    border-width: var(--width-input-border);
    border-style: solid;
    border-radius: 0.2em;
    box-shadow: 0 0 0 1px var(--control-border);
    border-color: var(--border-inset);
    background-color: var(--control-bg-inset);
    transition: background-color var(--hover-out-animation-len);
    display: grid;
    place-content: center;
    margin: 1px;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.9em;
    height: 0.9em;
    transform: scale(0);
    box-shadow: inset 1em 1em var(--content-primary);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

button,
input[type="button"],
input[type="submit"] {
    padding: var(--padding-buttons);
    border-width: var(--width-input-border);
    border-style: solid;
    border-color: var(--border-raised);
    border-radius: var(--radius-inputs);
    box-shadow: 0 0 0 1px var(--control-border);
    background-color: var(--control-bg-raised);
    background-image: var(--background-gloss);
    transition: background-color var(--hover-out-animation-len);
    margin: 1px;
    width: max-content;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover, select:not([multiple]):hover {
    background-color: var(--hover-color);
    transition: background-color 0s;
}

input[type="checkbox"]:hover, textarea, input[type="text"]:hover {
    background-color: var(--hover-color);
    transition: background-color 0s;
}

select:open, button:active {
    border-color: var(--border-inset);
    background-color: var(--control-bg-inset);
    background-image: none;
}

select:disabled, input:disabled, button:disabled, textarea:disabled {
    border-color: var(--control-border-disabled);
    box-shadow: 0 0 0 1px var(--control-border-disabled);
    cursor: not-allowed;
}

select:not([type="checkbox"]):disabled, input:disabled, button:disabled, textarea:disabled {
    background-color: transparent;
    background-image: none;
}

.comically-large {
    border-width: calc(5 * var(--width-input-border));
    border-radius: 0.3em;
    padding: 1rem 3rem 1rem 3rem;
}

.select-col {
    text-align: right;
}

form input:not([type="checkbox"]):not(.form-input-inline), form textarea {
    display: block;
}

.form-input-inline {
    display: inline;
}

.form-field-label {
    display: block;
    margin-left: calc(var(--width-input-border) + var(--padding-inputs-side) + 1px);
    margin-bottom: 0.2em;
}

.field-validation-error {
    color: var(--text-color-danger);
}

.validation-summary-errors {
    background-color: var(--bg-color-danger);
    border-radius: 0.5rem;
    border: 2px solid var(--void-color);
}

.container-form-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.form-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-vertical p {
    margin: 0;
}

.form-vertical label {
    display: block;
    margin-left: calc(var(--width-input-border) + 1px);
    width: max-content;
    font-weight: bold;
}

.form-required-indicator {
    font-size: 0.7em;
    display: inline-block;
    background-color: var(--bg-color-warning);
    padding: 1px 4px 1px 4px;
    margin-left: 0.4rem;
    border-radius: 4px;
    color: var(--content-primary);
    font-weight: normal;
}

.form-permanent-indicator {
    font-size: 0.7em;
    display: inline-block;
    background-color: var(--bg-color-danger);
    padding: 1px 4px 1px 4px;
    margin-left: 0.4rem;
    border-radius: 4px;
    color: var(--content-primary);
    font-weight: normal;
}