input.custom-form,
textarea.custom-form,
select.custom-form {
    background-color: var(--background-color);
    color: var(--foreground-color);
    border: 2px var(--foreground-color) solid;
}


input.custom-form,
select.custom-form {
    border-radius: 2rem;
}

textarea.custom-form {
    border-radius: 1.5rem;
}

select.custom-form {
    color: unset;
}

input.custom-form.fill:active,
input.custom-form.fill:focus,
textarea.custom-form.fill:active,
textarea.custom-form.fill:focus,
select.custom-form.fill:active,
select.custom-form.fill:focus,
select.custom-form option:focus,
select.custom-form option:hover,
select.custom-form option:active {
    background-color: var(--foreground-color);
    color: var(--background-color);
    box-shadow: none;
    border-color: black;
}

input.custom-form.fill:active::placeholder,
input.custom-form.fill:focus::placeholder,
textarea.custom-form.fill:active::placeholder,
textarea.custom-form.fill:focus::placeholder,
select.custom-form.fill:active::placeholder,
select.custom-form.fill:focus::placeholder {
    color: color-mix(in lab, transparent 50%, var(--background-color));
}

input.custom-form.outline:active,
input.custom-form.outline:focus,
textarea.custom-form.outline:active,
textarea.custom-form.outline:focus,
select.custom-form.outline:active,
select.custom-form.outline:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in lab, transparent 70%, var(--foreground-color));
    border-color: var(--foreground-color);
    background-color: inherit;
}