.input {
  @apply px-4 py-2 rounded-md border w-full bg-white border-gray-900/12 ring-gray-900/2 ring-2 focus:outline-none focus:ring-2 focus:ring-primary-500;

  &.is-invalid {
    @apply border-red-500 focus:ring-red-500;
  }
}

.input-label {
  @apply text-sm text-gray-700 font-normal mb-2 block;

  &:has(~ .is-invalid) {
    @apply text-red-500;
  }
}

.switch-label {
  @apply inline-flex gap-2 items-center cursor-pointer;

  .input-label {
    margin-bottom: 0 !important;
  }

  &:has(~ .is-invalid) {
    @apply text-red-500;
  }
}