examples/menubar-navigation/style.css
@import url("../button/style.css");

.nav {
  @apply
    h-full
}

.menubar {
  @apply
    flex
    w-max
    gap-1
    items-center
}

.menubar-item {
  @apply
    h-10
    px-5
    aria-[haspopup]:pr-3.5
    flex
    items-center
    gap-2
    cursor-default
    underline-offset-4
    rounded-full
    outline-none
    whitespace-nowrap
    transition-[background-color]
    aria-expanded:bg-black/[7.5%]
    dark:aria-expanded:bg-white/10
    hover:bg-black/5
    dark:hover:bg-white/5
    data-[focus-visible]:bg-blue-200/40
    dark:data-[focus-visible]:bg-blue-600/25
    [a&]:data-[focus-visible]:underline
    [a&]:cursor-pointer
    [a&]:hover:underline
}

.menubar-arrow {
  @apply
    [&_svg]:stroke-1
    transition-transform
    [[aria-expanded=true]_&]:[transform:rotate(180deg)]
}

.menu-wrapper {
  @apply
    [&:has([data-enter])]:transition-[transform]
}

.menu-arrow {
  @apply
    transition-[left]
}

.menu {
  @apply
    relative
    z-50
    p-4
    rounded-xl
    border
    border-solid
    max-w-[--popover-available-width]
    max-h-[max(max-content,var(--popover-available-height))]
    border-gray-250
    dark:border-gray-600
    bg-white
    text-black
    dark:bg-gray-700
    dark:text-white
    shadow-lg
    dark:shadow-lg-dark
    transition-opacity
    opacity-0
    data-[enter]:opacity-100
}

.menu-contents {
  @apply
    flex
    flex-col
    [&:has([role=group])]:grid
    [&:has([role=group])]:grid-cols-2
    [&:has([role=group])]:items-start
}

.group {
  @apply
    flex
    flex-col
}

.group-label {
  @apply
    p-2
    px-4
    font-medium
    opacity-60
    cursor-default
}

.menu-item {
  @apply
    flex
    flex-col
    items-start
    p-4
    gap-1
    rounded-md
    [a&]:cursor-pointer
    hover:bg-blue-200/40
    hover:text-black
    dark:hover:bg-blue-600/25
    dark:hover:text-white
    data-[focus-visible]:outline
    data-[focus-visible]:outline-2
    data-[focus-visible]:-outline-offset-1
    data-[focus-visible]:outline-blue-600
}

.menu-item-label {
  @apply
    font-medium
}

.menu-item-description {
  @apply
    opacity-70
    font-light
}
