examples/tag/style.css
@import url("../theme.css");

.wrapper {
  @apply
    flex
    flex-col
    gap-2
    w-[calc(100%-2rem)]
    max-w-[720px]
    mx-auto
}

.ak-tag-list-label {
  @apply
    ms-3
}

.ak-tag-list {
  @apply
    flex
    flex-wrap
    [scrollbar-width:none]
    [&::-webkit-scrollbar]:hidden
    items-center
    gap-1
    p-[5px]
    w-full
    overflow-auto
    rounded-lg
}

.ak-tag {
  @apply
    inline-flex
    items-center
    gap-2
    px-2
    rounded
    cursor-default
    whitespace-nowrap
    [outline:none]
    bg-black/[7%]
    dark:bg-white/[7%]
    [:focus-within>&]:data-[active-item]:bg-blue-600
    [:focus-within>&]:data-[active-item]:text-white
    [:focus-within>&]:data-[active-item]:[--tag-remove-opacity:1]
}

.ak-tag-remove {
  @apply
    grid
    place-items-center
    flex-none
    text-lg
    size-8
    -mx-2
    rounded-e-[inherit]
    opacity-[var(--tag-remove-opacity,0.6)]
    hover:opacity-100
    hover:bg-black/10
    hover:dark:bg-white/10
}

.ak-tag-input {
  @apply
    flex-1
    h-8
    px-2
    bg-transparent
    min-w-[200px]
    ![outline:none]
    [&[value=""]]:min-w-[16ch]
}

.ak-popover {
  @apply
    max-h-[min(var(--popover-available-height,300px),300px)]
    min-w-[min(var(--popover-available-width,280px),280px)]
    max-w-[min(var(--popover-available-width,420px),420px)]
    relative
    empty:hidden
    flex
    flex-col
    z-50
    overscroll-contain
    overflow-y-auto
    outline-none
    rounded-xl
    p-1
}

.ak-combobox-item {
  @apply
    ![outline:none]
    flex
    gap-2
    p-2
    active:pt-[9px]
    active:pb-[7px]
    scroll-m-1
    cursor-default
    items-center
    rounded-lg
    data-[active-item]:bg-blue-600
    data-[active-item]:text-white
}
