/* Indux Forms */

@layer components {

    /* Group wrapper */
    :where([role=group]:has(button, input, select)) {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0;
        width: fit-content;
        max-width: 100%;

        &>* {
            flex-basis: auto;
            flex-shrink: 0;

            &:focus {
                z-index: 1
            }
        }

        &>*:first-child {
            border-start-end-radius: 0;
            border-end-end-radius: 0
        }

        &>*:not(:first-child):not(:last-child) {
            border-radius: 0
        }

        &>*:last-child {
            border-start-start-radius: 0;
            border-end-start-radius: 0
        }

        &.even>* {
            flex-shrink: initial;
            width: 100%
        }
    }

    :where(form) {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 4);
        width: 100%
    }

    /* Fieldset wrapper for checkboxes and radios */
    :where(fieldset) {
        display: flex;
        flex-direction: column;
        gap: 0.375ch calc(var(--spacing) * 2);
        width: 100%;

        &:has([type=radio],[type=checkbox]) {
            gap: calc(var(--spacing) * 2);
        }
    }

    :where(fieldset:has(legend)) {
        padding: 1ch 1.5ch 1.5ch 1.5ch;
        border-radius: var(--radius, 0.5rem);
        border-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        border-style: solid;
        border-width: 1px;

        & :where(legend) {
            padding: 0 1.5ch;
            font-size: 0.875rem;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
        }
    }

    /* Label wrapper for radios and checkboxes */
    :where(label, .label):has([type=radio], [type=checkbox]) {
        display: flex;
        flex-flow: row;
        align-items: center;
        gap: 1ch;
        outline: 0 none;
        cursor: pointer;

        &:focus-within {
            box-shadow: 0 0 0 0
        }
    }

    /* Label wrapper */
    :where(label:not(:has(.label)), .label):has(button, [role=button], [type=button], [type=submit], select, input:not([role=button], [type=checkbox], [type=radio], [type=file], [type=search]), textarea):not(:has(data)) {
        display: flex;
        flex-direction: column;
        gap: 0.2ch;
        width: 100%;
        text-indent: calc(var(--radius) / 2);
        cursor: pointer;

        /* Prevent text indentation of bare label text nodes from being inherited */
        :where(*) {
            text-indent: 0
        }

        /* Indent label text in spans */
        :where(span:first-of-type) {
            padding-inline-start: calc(var(--radius) / 2)
        }

        :where(button, [role=button], [type=button], [type=submit], select, input:not([role=button], [type=checkbox], [type=radio], [type=file], [type=search]), textarea) {
            width: 100%;
            max-width: 100%
        }

        /* Space out stacked labels for search and file inputs */
        :has([type=search],[type=file]) :where([type=search],[type=file]) {
            margin-top: 0.2ch
        }
    }

    /* Inline label wrapper */
    label:has(data) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        width: 100%;

        &:focus-within {
            box-shadow: 0 0 0 0
        }

        /* Size buttons and inputs */
        & :where(.label, button, input:not([type=checkbox], [type=radio]), select, textarea) {
            width: calc(var(--spacing-field-height) * 8);
            max-width: 50%;
        }

        /* Focus state for .label wrapper for search and file inputs */
        & .label:focus-within {
            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 35%, transparent)
        }

        /* Align textarea label to top */
        &:has(textarea) {
            align-items: start;
            
            :where(data) {
                padding-top: calc(var(--spacing))
            }
        }
    }

    /* Label wrappers for search and file inputs using .label utility */
    label:has(.label) {
        justify-content: space-between;
        background-color: transparent;
        cursor: default;

        :where([type=search]) {
            width: 100%;
            max-width: 100%
        }
    }
}