examples/combobox/style.css
.label {
  @apply
    pl-4
    pb-2
    w-[250px]
  ;
}

.combobox {
  @apply
    h-10
    px-4
    w-[250px]
    text-base
    rounded-md
    border-none
    placeholder-black/60
    dark:placeholder-white/[46%]
    text-black
    dark:text-white
    bg-white
    hover:bg-gray-50
    dark:bg-gray-900
    dark:hover:bg-gray-950
    outline-1
    data-[active-item]:outline-2
    outline-offset-[-1px]
    outline-blue-600
    data-[focus-visible]:outline
    [box-shadow:inset_0_0_0_1px_rgba(0_0_0/0.15),inset_0_2px_5px_0_rgba(0_0_0/0.08)]
    dark:[box-shadow:inset_0_0_0_1px_rgba(255_255_255/0.15),inset_0_-1px_0_0_rgba(255_255_255/0.05),inset_0_2px_5px_0_rgba(0_0_0/0.15)]
  ;
}

.popover {
  @apply
    max-h-[min(var(--popover-available-height,300px),300px)]
    relative
    flex
    flex-col
    p-2
    z-50
    overscroll-contain
    overflow-auto
    outline-none
    rounded-lg
    border
    border-solid
    border-gray-250
    dark:border-gray-600
    bg-white
    text-black
    dark:bg-gray-700
    dark:text-white
    shadow-lg
    dark:shadow-lg-dark
  ;
}

.combobox-item {
  @apply
    ![outline:none]
    flex
    gap-2
    p-2
    active:pt-[9px]
    active:pb-[7px]
    scroll-m-2
    cursor-default
    items-center
    rounded
    hover:bg-blue-200/40
    dark:hover:bg-blue-600/25
    data-[active-item]:bg-blue-600
    data-[active-item]:text-white
    data-[active-item]:dark:bg-blue-600
  ;
}
