examples/form/style.css
@import url("../button/style.css");

.wrapper {
  @apply
    flex
    flex-col
    gap-6
    w-[320px]
    max-w-full
    p-4
    rounded-lg
    bg-white
    dark:bg-gray-700
    shadow
    dark:shadow-dark
  ;
}

.heading {
  @apply
    m-0
    text-xl
    mt-2
    font-semibold
    text-black
    dark:text-white
  ;
}

.field {
  @apply
    flex
    flex-col
    gap-2
  ;
}

.input {
  @apply
    h-10
    px-4
    text-base
    w-full
    rounded-md
    border-none
    placeholder-black/60
    dark:placeholder-white/[46%]
    text-black
    dark:text-white
    bg-gray-150/40
    dark:bg-gray-850
    hover:bg-gray-150
    dark:hover:bg-gray-900
    shadow-input
    dark:shadow-input-dark
    focus-visible:ariakit-outline-input
  ;
}

.error {
  @apply
    empty:hidden
    w-fit
    rounded-md
    py-2
    px-4
    border
    border-red-300
    bg-red-300/40
    text-red-800
    dark:border-red-600/40
    dark:bg-red-700/25
    dark:text-red-50
  ;
}

.buttons {
  @apply
    flex
    gap-4
    pt-4
  ;
}

.button {
  @apply
    rounded-md
    w-full
  ;
}

.reset {
  @apply
    font-semibold
    text-black/70
    dark:text-white/70
    border
    border-solid
    border-gray-250
    dark:border-gray-600
  ;
}
