examples/menubar/style.css
@import url("../menu/style.css");

.menubar {
  @apply
    flex
    rounded-lg
    p-0.5
    bg-white
    dark:bg-gray-700
    shadow
    dark:shadow-dark
}

.menubar-item {
  @apply
    px-4
    h-10
    rounded-md
    [.menubar:not(:focus-within)_&]:bg-transparent
    [.menubar:not(:focus-within)_&]:text-inherit
    [.menubar:not(:focus-within)_&]:hover:bg-blue-200/40
    [.menubar:not(:focus-within)_&]:hover:dark:bg-blue-600/40
    [.menubar:not(:focus-within)_&]:aria-expanded:bg-black/[7.5%]
    [.menubar:not(:focus-within)_&]:aria-expanded:dark:bg-white/10
    focus:text-white
    focus:bg-blue-600
    focus:dark:bg-blue-600
}

.menu {
  @apply
    w-max
    max-w-[max(var(--popover-available-width),calc(100%-calc(var(--popover-overflow-padding)*2)))]
    [&_.menu-item>.label]:flex-1
    [&_.menu-item>.label]:pr-8
}

.menu-item {
  @apply
    [.menu:not(:focus-within)_&]:aria-expanded:text-current
    [.menu:not(:focus-within)_&]:aria-expanded:bg-black/[7.5%]
    [.menu:not(:focus-within)_&]:aria-expanded:dark:bg-white/10
}
