examples/select-menu-default-open/style.css
@import url("../menu/style.css");
@import url("../select/style.css");

.wrapper {
  @apply
    w-full
    max-w-2xl
  ;
}

.search-wrapper {
  @apply
    flex
    gap-2
    items-center
  ;
}

.input {
  @apply
    w-full
    h-10
    px-4
    text-base
    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:outline-blue-600
  ;
}

.button {
  @apply
    w-auto
    justify-center
    rounded-md
    aria-expanded:bg-black/10
    aria-expanded:dark:bg-white/10
    [font-variant-numeric:tabular-nums]
  ;
}

.filters {
  @apply
    flex
    flex-wrap
    gap-2
    min-h-[theme(spacing.8)]
  ;
}

.filter {
  @apply
    flex
  ;
}

.select {
  @apply
    text-sm
    h-8
    px-3
    w-auto
    first-of-type:rounded-r-none
    last-of-type:rounded-l-none
    last-of-type:border-l
    last-of-type:border-l-gray-250
    last-of-type:dark:border-l-gray-550
  ;
}

.popover {
  @apply
    min-w-[var(--popover-anchor-width)]
  ;
}

.select-item {
  @apply
    text-sm
    pr-7
    [&>*]:flex-none
  ;
}

.menu-item {
  @apply
    pr-7
    [&:not([aria-checked])]:pl-7
  ;
}
