@layer base {
    form {
        border-radius: var(--radius-2);
    }

    :is(fieldset) {
        border: none;
        padding: 0;
    }

    :is(label) {
        display: block;
        /* padding: 0 0 10px 0; */
        cursor: pointer;

        &:not(:empty):has(+:required, :required):not(.no-asterisk):after {
            content: ' *';
            color: var(--color-red);
        }
    }

    :is(input, select, textarea) {
        /* margin-bottom: 20px; */
        /* padding: 8px 6px 8px 10px; */
        padding: var(--size-2) var(--size-2);

        width: 100%;
        /* min-height: 32px; */

        color: var(--color-gunmetal);
        font: inherit;

        border-radius: var(--radius-2);
        /* border: 1px solid var(--color-darkgrey); */
        border: none;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-black) 25%, transparent);

        background: var(--bg, var(--color-white));
        box-sizing: border-box;

        &:user-invalid,
        :user-invalid & {
            color: var(--color-red);
            outline: 2px solid color-mix(in srgb, currentColor 40%, transparent);
        }
    }

    textarea {
        min-height: 70px;
        resize: block;
    }

    select {
        padding-bottom: 9px;
        padding-top: 9px;

        /* if the placeholder is selected */
        &:has(option:checked:disabled):not(:user-invalid) {
            color: color-mix(in srgb, currentColor 50%, transparent);
            padding: var(--size-2) var(--size-2);
        }

        &.uppercase-options {
            option {
                text-transform: uppercase;
            }
        }
    }

    /* checkboxes */
    input[type="checkbox"] {
        /* Add if not using autoprefixer */
        -webkit-appearance: none;
        appearance: none;
        /* For iOS < 15 to remove gradient background */
        background-color: #fff;
        /* Not removed via appearance */
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 20px;
        height: 20px;
        border: 1px solid;
        border-radius: 4px;
        transform: translateY(-0.075em);
        display: grid;
        place-content: center;
        cursor: pointer;

        &:disabled:not(.enabled) {
            opacity: 0.4;
            pointer-events: none;
        }

        &:disabled.enabled {
            pointer-events: none;
            cursor: default;
        }

        &::before {
            content: "";
            width: 15px;
            height: 15px;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            border: 1px solid var(--color-bordergrey);
            box-shadow: inset 1em 1em var(--color-gunmetal);
            transform-origin: center center;
            /* tuples */
            clip-path: polygon(8% 52%, 28% 70%, 71% 23%, 77% 28%, 29% 81%, 2% 58%);
        }

        &:checked::before {
            transform: scale(1, 1) translateX(1px);
        }
    }

    input:is([type="radio"]) {
        margin: 0;
        box-shadow: none;
    }

    :is(label:has(input[type="checkbox"], input[type="radio"])) {
        display: grid;
        grid-template-columns: 1em;
        grid-auto-columns: auto;
        grid-auto-flow: column;
        gap: var(--size-3, 20px);
        color: var(--color-bordergrey);

        transition: color 150ms ease-in-out;

        &:has(:checked) {
            color: var(--color-gunmetal);

            input[type="checkbox"] {
                border: 1px solid var(--color-gunmetal);
            }
        }

        &:not(:has(:checked)) {
            color: var(--color-darkgrey);
        }

        &:hover {
            color: var(--color-steel);
        }

        &:has(:disabled) {
            color: color-mix(in hsl, currentColor 60%, transparent);

            div {
                color: color-mix(in hsl, currentColor 60%, transparent);
            }
        }

        a {
            color: color-mix(in hsl, currentColor, black 20%);
        }
    }

    .input-group {
        display: grid;
        width: 100%;
    }

    :is(input:not([type="checkbox"], [type="radio"]), select, textarea):user-invalid {
        accent-color: var(--color-red);
        /* box-shadow: 0 0 0 1px var(--color-red); */
    }

    /* custom password element */
    password-input {
        display: contents;

        &:user-invalid input {
            color: var(--color-red);
        }
    }
}