/*
Menu Component

Not loaded globally — the page includes this itself alongside Templates/Menu.tpl and
JS/Menu.js. Positioning uses CSS anchor positioning (position-anchor / position-area)
rather than JS, so opening and closing is handled entirely by the Popover API on the
panel (popover="auto") — see Menu.tpl.

--MenuAnchor-Name carries the per-instance anchor-name/position-anchor value, set as an
inline custom property from the Menu's id attribute so more than one instance can appear
on a page without colliding. See Menu.tpl.
 */
.MenuTrigger {
	anchor-name:                   var(--MenuAnchor-Name);
}

.MenuTriggerIcon {
	background-color:              currentColor;
	mask:                          url("/Images/IconEllipsis.svg") no-repeat center / contain;
}

/*
While the panel is open, the trigger reads the same as .FEIconButton:active (Base.css) —
solid white, Brand Secondary icon. It's a state of its own (JS/Menu.js toggles this class
off the panel's native "toggle" event) rather than reusing :active itself, deliberately
named away from any existing CSS pseudo-class so the two can diverge later without a
naming collision.
 */
.MenuTrigger.MenuTriggerExpanded {
	background-color:              #ffffff;
	color:                         var(--Colors-Brand-Secondary);
}

/*
Panel — position-area places it below the trigger with their right edges aligned, which
is the design; flip-block keeps it on screen if the trigger is ever near the viewport
bottom. Popover's UA stylesheet supplies display:none while closed; the rules below only
apply once :popover-open, and override the UA defaults for position and margin.
 */
.MenuPanel {
	/* 95% opacity is on the shape in Sketch, not the fill, so it's translated onto
	   background-color rather than the element's own opacity — an element opacity would
	   also fade the (fully-opaque) row text and icons. */
	background-color:              rgb(255 255 255 / 0.95);
	border:                        none;
	border-radius:                 12px;
	box-shadow:                    0 4px 8px rgb(0 0 0 / 0.25);
	color:                         #000000;
	margin:                        2px 0 0;
	padding:                       8px 0;
	position:                      absolute;
	position-anchor:               var(--MenuAnchor-Name);
	position-area:                 bottom span-left;
	position-try-fallbacks:        flip-block;
	width:                         200px;
}

.MenuList {
	list-style:                    none;
	margin:                        0;
	padding:                       0;
}

/*
Row — margin-inline insets the highlight from the panel edge; padding-inline lands the
icon's left edge 16px from the panel edge. Link and button share one class so both
states rules apply regardless of which element MenuItem.tpl rendered.
 */
.MenuItemLink {
	align-items:                   center;
	appearance:                    none;
	background:                    none;
	border:                        none;
	border-radius:                 8px;
	color:                         inherit;
	cursor:                        pointer;
	display:                       flex;
	font:                          inherit;
	gap:                           8px;
	height:                        38px;
	margin-inline:                 8px;
	padding-inline:                8px;
	text-align:                    left;
	text-decoration:               none;
	transition:                    var(--InteractiveTransitionDuration);
	width:                         calc(100% - 16px);
}

.MenuItemLink:hover {
	background-color:              #E1F0FA;
}

.MenuItemLink:active,
.MenuItemLink:focus-visible {
	background-color:              #B4D9F3;
	outline:                       none;
}

/*
Icon — mask reads shape only, per the icon convention in CLAUDE.md; one modifier class
per icon so MenuItem.tpl's icon attribute can select it without an inline style pointer.
 */
.MenuItemIcon {
	background-color:              currentColor;
	flex:                          0 0 auto;
	height:                        24px;
	width:                         24px;
}

.MenuItemIcon.IconShare {
	mask-image:                    url("/Images/IconShare.svg");
}

.MenuItemIcon.IconLink {
	mask-image:                    url("/Images/IconLink.svg");
}

.MenuItemIcon.IconEdit {
	mask-image:                    url("/Images/IconEdit.svg");
}

.MenuItemIcon.IconEnd {
	mask-image:                    url("/Images/IconEnd.svg");
}

.MenuItemLabel {
	font-size:                     16px;
	line-height:                   20px;
}