@utility form-input {
  @apply appearance-none block shadow-sm rounded-[0.625rem] border border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 focus:outline-hidden focus:ring-2 focus:ring-primary-600 px-3 py-2 w-full caret-primary-600 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 placeholder:select-none placeholder:font-normal;
}

@utility form-input-transparent {
  @apply appearance-none block focus:outline-hidden py-2 w-full caret-primary-600 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 placeholder:select-none placeholder:font-normal;
}

@utility form-label {
  @apply text-light block mb-1 text-sm not-dark:font-medium select-none;
}

@utility form-select {
  @apply block shadow-sm rounded-[0.625rem] border border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 focus:outline-hidden focus:ring-2 focus:ring-primary-600 pl-3 pr-6 py-2 w-full caret-primary-600 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 placeholder:select-none placeholder:font-normal;
}

@utility form-textarea {
  @apply appearance-none block shadow-sm rounded-[0.625rem] border border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 focus:outline-hidden focus:ring-2 focus:ring-primary-600 p-4 w-full min-h-[120px] resize-y caret-primary-600 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 placeholder:select-none placeholder:font-normal;
}

.form-textarea-wrap {
  @apply grid relative;
}

.form-textarea-wrap::after {
  content: attr(data-replicated-value) ' ';
  white-space: pre-wrap;
  visibility: hidden;
  /* Match textarea styling */
  @apply rounded-[0.625rem] border border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 p-4 min-h-[120px];
  font: inherit;
  grid-area: 1 / 1 / 2 / 2;
  box-sizing: border-box;
}

.form-textarea-wrap > textarea {
  resize: none !important;
  overflow: hidden;
  grid-area: 1 / 1 / 2 / 2;
  /* Inherit all other styles from .form-textarea */
}

.form-radio-tag,
.form-checkbox-tag {
  @apply rounded-md;

  > input[type='radio'],
  > input[type='checkbox'] {
    @apply sr-only;
  }

  > label {
    @apply inline-flex cursor-default items-center gap-1.25 rounded-lg border px-2 py-1 text-xs whitespace-nowrap text-soft transition-all duration-80 select-none;

    /* Default (neutral) tag style */
    @apply cursor-pointer border-neutral-200 bg-neutral-50 dark:bg-neutral-900/80 dark:border-neutral-800/80 hover:border-primary-100 dark:hover:border-primary-900 hover:bg-primary-50/80 dark:hover:bg-primary-900/80 hover:text-primary-500;

    .card &,
    .card-sm & {
      @apply dark:bg-neutral-800/40 dark:border-neutral-700/40 hover:border-primary-100 dark:hover:border-primary-900 hover:bg-primary-50/80 dark:hover:bg-primary-900/80 hover:text-primary-500;
    }

    /* Selected state for non-status tags */
    @apply peer-checked:border-primary-200 dark:peer-checked:border-primary-900 peer-checked:bg-primary-100/80 dark:peer-checked:bg-primary-950/80 peer-checked:text-primary-600 has-[svg]:peer-checked:pr-1.5 not-peer-checked:[&_svg]:hidden peer-checked:hover:[&_svg]:bg-rose-200/70 peer-checked:hover:[&_svg]:text-rose-600;

    & > svg {
      @apply size-4 cursor-pointer rounded-full p-0.5 text-primary-600 transition-all duration-80;
    }
  }
}

@utility form-checkbox {
  @apply appearance-none size-4.5 border border-neutral-300 dark:border-neutral-700 rounded-sm bg-white dark:bg-neutral-800 mt-0.25 shrink-0 checked:bg-primary-600 checked:border-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 disabled:border-neutral-400 disabled:bg-neutral-200 transition duration-80;

  & + svg {
    @apply size-3.5 text-white absolute translate-y-[0.22rem] translate-x-0.5 pointer-events-none;
  }

  &:not(:checked) + svg {
    @apply hidden;
  }

  & ~ .form-label {
    @apply text-light block mb-0! text-sm not-dark:font-medium select-none;
  }
}

@utility form-number-frame {
  @apply relative w-full md:max-w-54 flex items-stretch shadow-sm rounded-[0.625rem] has-[.form-number:focus]:ring-2 has-[.form-number:focus]:ring-primary-600 select-none;
}

@utility form-number {
  @apply appearance-none grow block text-center border-y border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 focus:outline-hidden px-3 py-2 w-full caret-primary-600 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 placeholder:select-none placeholder:font-normal;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    @apply appearance-none;
  }
}

@utility form-number-decrement {
  @apply border border-neutral-300 dark:border-neutral-800 bg-white dark:bg-neutral-900 rounded-l-[0.625rem] px-3 py-2 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-600 transition duration-80 active:bg-neutral-200/70 dark:active:bg-neutral-800 cursor-pointer;
}

@utility form-number-increment {
  @apply border border-neutral-300 dark:border-neutral-800 bg-white dark:bg-neutral-900 rounded-r-[0.625rem] px-3 py-2 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-600 transition duration-80 active:bg-neutral-200/70 dark:active:bg-neutral-800 cursor-pointer;
}