/**
 * INPUT FIELD
 *
*/
@layer components {
    .n7-input-field {
        @apply grid content-start;
    }

    .n7-input-field__label {
        @apply block text-sm font-bold n7-content-03;
    }

    legend:where(.n7-input-field__label) {
        @apply mb-1;
    }

    .n7-input-field__error {
        @apply n7-body-sm font-medium n7-content-error;
    }

    .n7-input-field__description {
        @apply n7-body-sm font-medium n7-content-03;
    }

    .n7-input-field.has-error input {
        @apply border-2 n7-border-error-dark;
    }

    /* INPUT FIELD INLINE */
    .n7-field-inline {
        @apply flex items-center gap-2;
    }

    .n7-field-inline .n7-input,
    .n7-field-inline .n7-select {
        @apply flex-1;
    }
}