/* input styles */
input,
select,
button,
.button,
details summary {
    height: 40px !important;
}

input,
textarea,
select {
    background: var(--background-surface1);
    color: currentColor;
    border: none;
    outline: solid 2px transparent;
    padding: var(--u-04) var(--u-08);
    font-size: 16px;
    height: max-content;
    max-width: 100%;
    border-radius: 0 !important;
    transition:
        background 0.15s,
        outline 0.15s,
        opacity 0.15s,
        filter 0.15s;
}

input.round,
textarea.round,
select.round {
    border-radius: var(--u-04) !important;
}

input:invalid,
textarea:invalid,
select:invalid,
input.invalid {
    /* so, the idea behind this is because the input is technically wrong... but it isn't required,
       we're only going to show a yellow "border" thing! */
    background-clip: padding-box;
    outline: solid 2px var(--yellow) !important;
}

input:invalid:required,
textarea:invalid:required,
select:invalid:required {
    outline: solid 2px var(--red) !important;
}

input:disabled,
textarea:disabled,
.checkbox-container.disabled,
select:disabled {
    opacity: 50%;
    box-shadow: inset 0 0 0 2px var(--background-surface3);
    filter: opacity(50%);
    cursor: not-allowed !important;
}

input.secondary,
textarea.secondary,
select.secondary {
    background: var(--background-surface);
}

textarea {
    resize: vertical;
}

.checkbox-container.secondary {
    background: var(--background-surface);
}

.checkbox-container {
    background: var(--background-surface1);
    padding: var(--u-04) var(--u-08);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem; /* should match the height of an input element */
    width: 2.5rem;
    cursor: pointer;
    gap: 0.5rem;
}

.checkbox-container + input {
    width: calc(18rem - 2.5rem) !important; /* normal input width - checkbox width */
}

/* not checked */
.checkbox-container input[type="checkbox"]:not(:checked) + .check,
.checkbox-container input[type="checkbox"]:checked + * + .x {
    display: none;
}

.checkbox-container input[type="checkbox"]:checked + .check,
.checkbox-container input[type="checkbox"]:not(:checked) + * + .x {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-container input[type="checkbox"] {
    display: none;
}

label {
    user-select: none;
    -webkit-user-select: none;
}