logic-form {


    --primary: #3e297a;
    --secondary: #00d0d0;
    --danger: red;


    &[data-theme="green"] {
        --primary: forestgreen;
        --secondary: #31d000;
        --danger: red;
    }


    &[data-theme="orange"] {
        --primary: #a34300;
        --secondary: #f4a261;
        --danger: #c1121f;
    }

    &[data-theme="red"] {
        --primary: #8f1d2c;
        --secondary: #e85d75;
        --danger: #b00020;
    }

    &[data-theme="teal"] {
        --primary: #075e5e;
        --secondary: #20c9c9;
        --danger: #d62828;
    }

    &[data-theme="slate"] {
        --primary: #293241;
        --secondary: #5c677d;
        --danger: #c44536;
    }

    &[data-theme="gold"] {
        --primary: #76520e;
        --secondary: #d9a441;
        --danger: #b42318;
    }

    &[data-theme="pink"] {
        --primary: #8a285f;
        --secondary: #e27ab3;
        --danger: #c1121f;
    }

    &[data-theme="indigo"] {
        --primary: #303f9f;
        --secondary: #7986cb;
        --danger: #d32f2f;
    }


    --white: color-mix(in oklch, white 97%, var(--primary) 3%);
    --gray: color-mix(in oklch, gray 35%, var(--primaryLight) 65%);
    --black: color-mix(in oklch, black 75%, var(--primary) 25%);
    --primaryLightest: color-mix(in oklch, white 94%, var(--primary) 6%);
    --primaryLighter: color-mix(in oklch, white 90%, var(--primary) 10%);
    --primaryLight: color-mix(in oklch, white 60%, var(--primary) 40%);
    --primaryDark: color-mix(in oklch, black 25%, var(--primary) 75%);
    --primaryDarker: color-mix(in oklch, black 50%, var(--primary) 50%);
    --secondaryLightest: color-mix(in oklch, white 94%, var(--secondary) 6%);
    --secondaryLighter: color-mix(in oklch, white 90%, var(--secondary) 10%);
    --secondaryLight: color-mix(in oklch, white 60%, var(--secondary) 40%);
    --secondaryDark: color-mix(in oklch, black 25%, var(--secondary) 75%);
    --secondaryDarker: color-mix(in oklch, black 50%, var(--secondary) 50%);

    --border: 1px solid var(--primary);
    --borderRadius: 0;

    --column-width: 20rem;

    font: normal .875rem Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    sans-serif;
    color: var(--black);
    box-sizing: border-box;
    interpolate-size: allow-keywords;
    accent-color: var(--secondary);
    display: contents;

    * {
        font: inherit;
        margin: 0;
        padding: 0;
        accent-color: var(--secondary);
        color: var(--black);

        &,
        &::before,
        &::after {
            box-sizing: border-box;
        }
    }

    ::selection {
        background-color: var(--primary);
        color: var(--white);
    }

    >form {

        display: grid;
        grid-template-columns: 1fr;
        height: fit-content;
        min-width: 30rem;
        width: fit-content;
        max-width: 45rem;
        row-gap: 1.5rem;
        padding: 1rem;
        border: 1px solid var(--gray);

        >div:first-of-type {
            display: grid;
            grid-template-columns: 1fr;

            /* grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr)); */
            row-gap: 1.5rem;
            column-gap: 2rem;
            padding-inline-end: 5%;
        }

        >div:last-of-type {
            margin-top: 1rem;
            justify-self: end;
            display: flex;
            gap: .6rem;
        }

        >div[data-field-type="checkbox"] {
            min-height: 3.59rem;
            align-content: end;
        }
    }

    form>p {
        line-height: 1.6;
        font-weight: 600;
        font-size: 1.1em;
    }

    label {
        display: block;
        width: fit-content;
        margin-bottom: .2em;
    }

    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        width: 100%;
        margin: 0;
        display: grid;
        align-items: center;
        justify-items: start;
        grid-template-columns: min-content 1fr;
        gap: .5rem;
        padding: .5rem;
        cursor: pointer;
        border-radius: .2em;
        transition: background-color .1s ease-out;
        user-select: none;

        &:hover {
            background-color: var(--primaryLighter);
        }

        &:has(:disabled) {
            cursor: default;
            background-color: revert;

            &:hover {
                background-color: revert;
            }
        }

        /* Disabled fieldset instead of disabled inputs */
        &:where(:disabled) {
            cursor: default;
            background-color: revert;

            &:hover {
                background-color: revert;
            }
        }
    }

    input[type="radio"],
    input[type="checkbox"] {
        cursor: pointer;
        height: 1.25rem;
        width: 1.25rem;
        accent-color: var(--secondary);

        &:disabled {
            cursor: default;
        }
    }

    button,
    select,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    textarea {

        color: var(--black);
        display: block;
        width: 100%;
        height: 2.25rem;
        padding: .4rem .6rem;
        outline: 0;
        border: var(--border);
        border-radius: var(--borderRadius);
        background-color: var(--primaryLightest);

        &:disabled {
            cursor: default;
            opacity: .7;
            filter: grayscale(.8);
        }

        &:hover:not(:disabled, :focus, :focus-visible, :focus-within) {
            border-color: var(--secondary);
        }

        &:focus-visible,
        &:focus {
            box-shadow: 0px 0px 0px 1px inset var(--secondary);
            border-color: var(--secondary);

            &:not(button) {
                background-color: var(--white);
            }

        }

        &:where(button) {
            display: grid;
            place-items: center;
            min-width: 4rem;
            width: fit-content;
            max-width: 100%;
            text-wrap: balance;
            user-select: none;
            cursor: pointer;
            background-color: var(--primary);
            color: var(--white);


            &:active:not(:disabled) {
                outline: 2px solid var(--secondary);
            }

        }

        &:where(select) {
            cursor: pointer;
        }

        &:where(textarea) {
            min-height: 6rem;
            max-height: 14rem;
            resize: vertical;
        }
    }


    fieldset {
        padding: .5rem 0;
        border: var(--border);
        border-radius: var(--borderRadius);
        background-color: var(--primaryLightest);

        legend {
            cursor: default;
            margin: 0 .5rem;
            padding: 0 .5rem;
            border-radius: .2em;
        }

        label:has(input[type="radio"]),
        label:has(input[type="checkbox"]) {
            border-radius: 0;
        }

        >div {
            display: grid;
            gap: 0.25rem;
            margin: 0 0.5rem;
        }

    }

}