.form-group {
  @apply flex flex-col items-start gap-1;
}

.label {
  @apply block text-sm/6 font-medium text-foreground;
}

.input {
  @apply block w-full rounded-lg bg-foreground/5 px-3 py-1.5 text-base text-foreground border border-foreground/10 hover:border-foreground/15 placeholder:text-subtle-foreground focus-visible:border-primary focus-visible:ring-primary focus-visible:ring-1 focus-visible:ring-inset transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm/6;
}

.opt-input {
  @apply w-12 h-12 text-center text-xl border border-foreground/10 hover:border-foreground/15 rounded-lg bg-foreground/5 focus-visible:border-primary focus-visible:ring-primary focus-visible:ring-1 focus-visible:ring-inset transition-[color,box-shadow] outline-none;
}

.textarea {
  @apply block w-full rounded-lg bg-foreground/5 px-3 py-1.5 resize-y min-h-[80px] text-base text-foreground border border-foreground/10 hover:border-foreground/15 placeholder:text-subtle-foreground focus-visible:border-primary focus-visible:ring-primary focus-visible:ring-1 focus-visible:ring-inset transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm/6;
}

.select {
  @apply col-start-1 row-start-1 w-full appearance-none rounded-lg bg-foreground/5 py-1.5 pr-8 pl-3 text-base text-foreground border border-foreground/10 hover:border-foreground/15 focus:border-primary focus:outline-none focus:ring-1 focus:ring-inset focus:ring-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm/6
}

.radio {
  @apply p-3 flex flex-col gap-y-0.5 justify-center w-full text-muted-foreground
    bg-foreground/5 rounded-lg border border-foreground/10 hover:border-foreground/15
    disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
}

.radio-title {
  @apply text-sm font-medium text-foreground;
}

.radio-description {
  @apply text-sm text-muted-foreground;
}

.time-input,
.date-input {
  @apply block w-full rounded-lg bg-foreground/5 px-3 py-1.5 text-base text-foreground
  border border-foreground/10 hover:border-foreground/15
  placeholder:text-subtle-foreground
  focus-visible:border-primary focus-visible:ring-primary focus-visible:ring-1 focus-visible:ring-inset
  transition-[color,box-shadow] outline-none
  disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm/6;
}

.checkbox {
  @apply h-4 w-4 rounded-md border border-foreground/10 bg-foreground/5
  hover:border-foreground/15
  focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary
  accent-primary
  cursor-pointer;
}
.checkbox:disabled { @apply opacity-50 cursor-not-allowed; }

.form-error {
  @apply -mt-0.5 relative inline-block rounded-md bg-destructive border border-destructive px-1 py-0.5 font-medium text-xs text-white;
}

.form-error::before,
.form-error::after {
  @apply absolute bottom-full left-1.5 border-solid border-transparent pointer-events-none content-["_"];
}

.form-error::before {
  @apply border-[6px] border-b-destructive;
}

.form-error::after {
  @apply border-[5px] border-b-destructive;
}

hr {
  @apply border-border;
}