.menu {
	--context-menu-width: 13.5rem;
	position: fixed;
	width: min(var(--context-menu-width), calc(100vw - (var(--space-4) * 2)));
	display: grid;
	gap: 0;
	padding: var(--space-1);
	border: 1px solid color-mix(in srgb, var(--color-border-strong) 56%, transparent);
	border-radius: calc(var(--radius-md) + (var(--space-1) / 2));
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
	z-index: 2147483647;
	user-select: none;
}

.header {
	display: grid;
	gap: calc(var(--space-1) / 2);
	padding: var(--space-2) calc(var(--space-2) + (var(--space-1) / 2));
}

.eyebrow {
	@include text-caption;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.title {
	@include text-label;
	color: var(--color-text);
	font-weight: var(--font-weight-title);
}

.sectionList {
	display: grid;
	gap: 0;
}

.sectionListCompact {
	gap: calc(var(--space-1) / 2);
}

.section {
	display: grid;
	gap: 0;
}

.section:first-child {
	padding-top: calc(var(--space-1) / 2);
}

.section + .section {
	margin-top: calc(var(--space-1) / 2);
	padding-top: var(--space-2);
	border-top: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
}

.sectionLabel {
	@include text-caption;
	color: var(--color-text-subtle);
	padding: 0 var(--space-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.actionList {
	display: grid;
	gap: 0;
}

.actionItem {
	position: relative;
}

.action {
	width: 100%;
	min-height: calc(var(--control-size-md) - var(--space-2));
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-2);
	padding: var(--space-2) calc(var(--space-2) + (var(--space-1) / 2));
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text);
	text-align: left;
	font-size: var(--font-size-label);
	line-height: var(--line-height-label);
	font-weight: var(--font-weight-label);
	transition:
		background var(--motion-duration-fast) var(--motion-ease-standard),
		border-color var(--motion-duration-fast) var(--motion-ease-standard),
		color var(--motion-duration-fast) var(--motion-ease-standard);
}

.actionCreate {
	border-color: transparent;
	background: transparent;
	font-weight: var(--font-weight-title);
	box-shadow: none;
}

.actionCreate:hover,
.actionCreate:focus-visible,
.actionCreate.actionSubmenuOpen {
	background: color-mix(in srgb, var(--color-surface-hover) 82%, var(--color-surface));
	border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
}

.actionCreateIcon {
	width: calc(var(--control-size-md) - var(--space-3));
	height: calc(var(--control-size-md) - var(--space-3));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--color-surface-hover) 72%, var(--color-surface));
	color: var(--color-text);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 74%, transparent);
}

.actionLabel {
	min-width: 0;
}

.actionMeta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2);
	padding-left: var(--space-3);
}

.actionShortcut {
	color: var(--color-text-muted);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	font-weight: var(--font-weight-caption);
	white-space: nowrap;
}

.actionChevron {
	color: var(--color-text-subtle);
	flex: 0 0 auto;
}

.actionSubmenuOpen {
	background: color-mix(in srgb, var(--color-surface-hover) 82%, var(--color-surface));
	border-color: color-mix(in srgb, var(--color-border-strong) 72%, transparent);
}

.action:hover,
.action:focus-visible {
	background: color-mix(in srgb, var(--color-surface-hover) 78%, var(--color-surface));
	border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
}

.actionDanger {
	color: var(--color-danger-text, var(--color-text));
}

.actionDanger:hover,
.actionDanger:focus-visible {
	background: color-mix(in srgb, var(--color-danger-soft, var(--color-surface-hover)) 72%, transparent);
	border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 72%, transparent);
	color: var(--color-danger-text, var(--color-text));
}

.submenu {
	position: absolute;
	top: calc(var(--space-1) * -1);
	left: calc(100% + var(--space-2));
	width: min(var(--context-menu-width), calc(100vw - (var(--space-4) * 2)));
	padding: var(--space-1);
	border: 1px solid color-mix(in srgb, var(--color-border-strong) 56%, transparent);
	border-radius: calc(var(--radius-md) + (var(--space-1) / 2));
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
	z-index: 2147483647;
}

.submenuList {
	display: grid;
	gap: var(--space-1);
}

@include respond-down(mobile) {
	.menu {
		display: none;
	}
}