.webform {
    --prose-max-w: 100%;

    .fieldset {
        @apply border-y py-4;

        + .fieldset {
            @apply border-t-0 -mt-4
        }
    }

    .form-control {
        --tw-ring-color: theme('colors.sky.600');
    }

    .form-label {
        @apply text-base font-medium;
    }

    :where(.form-required)::after {
        content: "*" / "field is required";

        @apply text-red-700 ms-[0.05em];
    }

    .form-check-label  {
        @apply text-sm font-normal;
    }

    :where(.form-checkboxes, .form-radios) {
        @apply flex flex-col flex-wrap gap-x-3 gap-y-2;
    }

    :where(.webform-options-display-side-by-side) {
        @apply flex-row;
    }

    :where(.webform-options-display-two-columns) {
        @apply grid grid-cols-2 gap-x-4;
    }

    :where(.webform-options-display-three-columns) {
        @apply grid grid-cols-3 gap-x-4;
    }
}

.fieldset__legend {
    @apply font-medium text-lg mb-2;

    :is(.checkboxes--wrapper, .radios--wrapper) & {
        @apply text-base mb-1;
    }

}

.webform-flexbox {
    @apply flex flex-wrap gap-4 md:gap-6;

    + .description {
        @apply mt-2 block;
    }
}

.webform-flex {
    @apply min-w-0;
}

.webform-flex--1 {
    @apply md:flex-1;
}

.webform__errors {
    @apply mb-3;
}