/* Text field styles */
/* use textfield instead of text-field to avoid conflict with Tailwind `text-` prefix */
.textfield {
  @apply flex flex-col gap-1;

  &[data-invalid="true"],
  &[aria-invalid="true"] {
    [data-slot="description"] {
      @apply hidden;
    }
  }

  [data-slot="description"] {
    @apply px-1;
  }
}

/* Full width modifier */
.textfield--full-width {
  @apply w-full;

  /* Automatically make Input full width when TextField is full width */
  [data-slot="input"],
  [data-slot="textarea"] {
    @apply w-full;
  }
}