/* === context_menu.css ===
   Dropdown menus, context actions, popups */

.ui-context-menu {
	position: fixed; /* Fixed is safer for global context menus to avoid overflow issues */
	min-width: 12.857rem;
	background-color: var(--background-primary-alt);
	border: var(--divider-width) solid var(--background-modifier-border);
	border-radius: var(--input-radius);
	box-shadow: var(--shadow-l);
	z-index: var(--z-context); /* Higher than drawer and selects */
	display: none;
	padding: var(--size-2-1) 0;
	animation: context-menu-fade-in 0.15s ease-out;
	user-select: none;
}

.ui-context-menu.active {
	display: block;
}

.context-menu-item {
	display: flex;
	align-items: center;
	gap: var(--size-4-3);
	padding: var(--size-4-2) var(--size-4-4);
	cursor: pointer;
	transition: var(--transition-base);
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
}

.context-menu-item:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
}

.context-menu-item .btn-icon {
	width: var(--icon-s);
	height: var(--icon-s);
	color: inherit; /* Should inherit from container/hover state */
	opacity: 0.7;
}

.context-menu-item:hover .btn-icon {
	opacity: 1;
}

.context-menu-divider {
	height: var(--divider-width);
	background-color: var(--divider-color);
	margin: var(--size-2-1) 0;
	opacity: 0.5;
}

@keyframes context-menu-fade-in {
	from {
		opacity: 0;
		transform: translateY(calc(-1 * var(--size-4-1))) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}