.form-grid {
    @apply grid;
    @apply gap-y-8;
    @apply max-w-full;
}

.form-row {
    @apply grid;
    @apply grid-cols-3;
    @apply gap-x-4;
    @apply max-w-full;
    @apply md:max-w-xl; /* same as form-field */
}

.form-fieldsets-no-max-w .form-fieldset {
    @apply md:max-w-none;
}

.form-fieldset {
    @apply grid;
    @apply gap-y-6;
    @apply pl-6;
    @apply my-4;
    @apply md:max-w-xl; /* same as form-field */
}

.form-fieldset-clean {
    @apply bg-gray-500/5;
    @apply grid;
    @apply gap-y-6;
    @apply p-6;
    @apply rounded-sm;
    @apply border;
    @apply border-gray-900/10;
}

.form-fieldset-clean.form-fieldset-focus {
    @apply bg-blue/5;
}

.form-legend {
    @apply uppercase;
    @apply tracking-widest;
    @apply font-extrabold;
}

.form-legend-accent {
    @apply font-semibold;
    @apply normal-case;
    @apply tracking-normal;
    @apply truncate;
}

.form-actions {
    @apply grid;
    @apply items-start;
    @apply gap-x-4;
    @apply gap-y-8;
    @apply grid-cols-12;
}

.form-field {
    @apply flex;
    @apply flex-col;
    @apply gap-3;
    @apply min-w-0;
    @apply min-h-13;
}
@media (width >= theme(--breakpoint-md)) {
    .form-field {
        max-width: 34.75rem;
    }
}

.form-buttons {
    @apply sticky;
    @apply z-10;
    @apply -mx-6;
    @apply px-6;
    @apply py-3;
    @apply -mb-3;
    @apply bg-transparent;
    @apply border;
    @apply border-transparent;
    @apply rounded-t-xl;
    bottom: -2px;
}

.form-buttons-stuck {
    @apply bg-white;
    @apply border-t-snow;
    @apply border-r-snow;
    @apply border-l-snow;
    @apply p-5;
    @apply 2xl:-mx-6;
    @apply shadow-buttons;
}

.form-error {
    @apply text-xs;
    @apply text-red;
    @apply flex;
    @apply items-center;
    @apply mr-auto;

    @apply before:content-['!'];
    @apply before:mr-2;
    @apply before:w-4;
    @apply before:h-4;
    @apply before:inline-flex;
    @apply before:flex-none;
    @apply before:items-center;
    @apply before:justify-center;
    @apply before:rounded-full;
    @apply before:bg-red;
    @apply before:font-extrabold;
    @apply before:text-[8px];
    @apply before:text-white;
}

.form-note {
    @apply mt-2;
    @apply text-gray-400;
    @apply text-sm;
}
