input, select, textarea {
    --bg: hsl(var(--b4));
    padding: var(--padding, 7px 12px);
    height: 32px;
    background-color: var(--bg);
    border: none;
    box-shadow: var(--shadow, var(--interact-shadow));
    border-radius: var(--item-med-radius);
    color: hsl(var(--c2));
    caret-color: hsl(var(--l1));
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: var(--line-height);

    transition-property: outline;
    transition-duration: var(--trans);
    transition-timing-function: var(--trans-function);
}
:is(input, select, textarea):focus {
    outline: 2px solid hsl(var(--l1));
    transition: none;
}

input::placeholder, textarea::placeholder {
    color: hsla(var(--c3),75%);
    opacity: 1;
}


.checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkbox label {
    user-select: none;
}

input:is([type="radio"], [type="checkbox"]) {
    --indent: 0.97;
    padding: initial;
    border: initial;
    margin: initial;
}


form fieldset {
    display: flex;
    flex-direction: column;
    gap: 10px;
}