basecoat/src/css/components/dropdown-menu.css

/* Dropdown Menu */
@layer components {
  .dropdown-menu {
    @apply relative inline-flex;

    [data-popover] {
      @apply p-1;
      min-width: anchor-size(width);

      [role='menuitem'],
      [role='menuitemcheckbox'],
      [role='menuitemradio'] {
        @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;

        &:not([aria-disabled='true']) {
          @apply focus-visible:bg-accent focus-visible:text-accent-foreground;
        }

        &.active {
          @apply bg-accent text-accent-foreground;
        }
      }
      [role='menu'] [role='heading'] {
        @apply flex px-2 py-1.5 text-sm font-medium;
      }
      [role='separator'] {
        @apply border-border -mx-1 my-1;
      }
    }
    &:not([data-dropdown-menu-initialized]) [data-popover] {
      [role='menuitem'],
      [role='menuitemcheckbox'],
      [role='menuitemradio'] {
        @apply hover:bg-accent hover:text-accent-foreground;
      }
    }
  }
}