:where(button, input, optgroup, select, textarea) {
    font: inherit;
}

textarea, select, input {
    field-sizing: content;
}

/* defensive style - just demo values */
textarea {
    min-block-size: 3lh;
    max-block-size: 80svh;
    min-inline-size: 30ch;
    max-inline-size: 80ch;
    resize: vertical;
}

form {
    display: grid;
    gap: 1rem;

    padding: 1em;

    background: radial-gradient(var(--bg), var(--bg-alt)) 50%;

    border-radius: 0.5em;
    border: 1px solid var(--muted);
}


:where(input) {
    font-size: inherit;

    inline-size: fit-content;

    min-inline-size: 25ch;

    padding: 0.5rem;

    border-radius: 0.25rem;
    border: none;

    color: var(--text);

    &::placeholder {
        font-style: italic;
    }

    &:required {

    }

    &:not(:placeholder-shown, :focus):user-invalid {
        background-color: #300a0a;
        color: #ffc8c8;
    }
}

label:has(input:required)::before {
    content: "* ";
}

label:has(input) {
    background-color: red;
    display: inline-flex;
    flex-direction: column;
    inline-size: fit-content;
}

select,
::picker(select) {
    appearance: base-select;
}

select {
    padding: 0.25em;
    inline-size: fit-content;

    &::marker {
        color: red;
    }
}

select::picker-icon {
    color: #999;
    transition: 0.4s rotate;
}

select:open::picker-icon {
    rotate: 180deg;
}


/* select items */
::picker(select) {
    appearance: base-select;
}

option:checked {
    font-weight: bold;
}