1/* Dropdown Menu */
2@layer components {
3 .admin-dropdown-menu {
4 @apply relative inline-flex;
5
6 [data-popover] {
7 @apply p-1;
8 min-width: anchor-size(width);
9
10 [role='menuitem'],
11 [role='menuitemcheckbox'],
12 [role='menuitemradio'] {
13 @apply aria-hidden:hidden [&_svg]:text-admin-muted-foreground relative flex cursor-default items-center gap-2 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;
14 border-radius: var(--radius-dropdown-item);
15
16 &:not([aria-disabled='true']) {
17 @apply focus-visible:bg-admin-accent focus-visible:text-admin-accent-foreground;
18 }
19
20 &.active {
21 @apply bg-admin-accent text-admin-accent-foreground;
22 }
23 }
24 [role='menu'] [role='heading'] {
25 @apply flex px-2 py-1.5 text-sm font-medium;
26 }
27 [role='separator'] {
28 @apply border-admin-border -mx-1 my-1;
29 }
30 }
31 &:not([data-dropdown-menu-initialized]) [data-popover] {
32 [role='menuitem'],
33 [role='menuitemcheckbox'],
34 [role='menuitemradio'] {
35 @apply hover:bg-admin-accent hover:text-admin-accent-foreground;
36 }
37 }
38 }
39}