/*
 * Material 3 Expressive menus adapted from current AndroidX Menu.kt tokens.
 */

.vortexg-m3-menu,
.vortexg-m3-menu *,
.vortexg-m3-select-field,
.vortexg-m3-select-field *,
.vortexg-m3-menu__popup,
.vortexg-m3-menu__popup * {
	box-sizing: border-box;
}

.vortexg-m3-menu,
.vortexg-m3-select-field {
	font-family: var(--md-sys-typescale-body-large-font);
}

.vortexg-m3-select-field {
	display: grid;
	min-width: 180px;
	gap: 7px;
	color: var(--md-sys-color-on-surface);
}

.vortexg-m3-select-field__label {
	color: var(--md-sys-color-on-surface-variant);
	font: 500 var(--md-sys-typescale-label-large-size) / var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
}

.vortexg-m3-select-field__control {
	position: relative;
	min-width: 0;
}

.vortexg-m3-select-field__supporting {
	color: var(--md-sys-color-on-surface-variant);
	font: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);
	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.vortexg-m3-select-field.is-enhanced .vortexg-m3-select__native,
.vortexg-m3-select-field.is-enhanced select {
	display: none !important;
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	inset: 50% auto auto 50% !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.vortexg-m3-menu__trigger,
.vortexg-m3-select__trigger {
	position: relative;
	display: inline-flex;
	inline-size: 100%;
	min-inline-size: 112px;
	min-block-size: 48px;
	margin: 0;
	padding: 0 16px;
	overflow: hidden;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	border: 0;
	border-radius: var(--md-sys-shape-corner-large);
	background: var(--md-sys-color-surface-container-low);
	box-shadow: none;
	color: var(--md-sys-color-on-surface);
	font: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size) / var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);
	letter-spacing: var(--md-sys-typescale-body-large-tracking);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	-webkit-appearance: none;
	appearance: none;
}

.vortexg-m3-menu--vibrant > .vortexg-m3-menu__trigger,
.vortexg-m3-select-field--vibrant .vortexg-m3-select__trigger {
	background: var(--md-sys-color-tertiary-container);
	color: var(--md-sys-color-on-tertiary-container);
}

.vortexg-m3-menu__trigger-state,
.vortexg-m3-select__trigger-state,
.vortexg-m3-menu__item-state {
	position: absolute;
	z-index: 0;
	inset: 0;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.vortexg-m3-menu__trigger > :not(.vortexg-m3-menu__trigger-state):not(.vortexg-m3-menu__ripple),
.vortexg-m3-select__trigger > :not(.vortexg-m3-select__trigger-state):not(.vortexg-m3-menu__ripple),
.vortexg-m3-menu__item > :not(.vortexg-m3-menu__item-state):not(.vortexg-m3-menu__ripple) {
	position: relative;
	z-index: 1;
}

.vortexg-m3-menu__ripple {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: var(--md-sys-state-pressed-state-layer-opacity);
	pointer-events: none;
	transform: scale(0);
	transform-origin: center;
	transition:
		transform 360ms cubic-bezier(0.2, 0, 0, 1),
		opacity 180ms linear;
	will-change: transform, opacity;
}

.vortexg-m3-menu__ripple.is-active {
	transform: scale(1);
}

.vortexg-m3-menu__ripple--preview.is-active {
	opacity: calc(var(--md-sys-state-pressed-state-layer-opacity) * 1.8);
	transform: scale(0.52);
}

.vortexg-m3-menu__ripple.is-releasing {
	opacity: 0;
}

.vortexg-m3-menu__trigger:hover .vortexg-m3-menu__trigger-state,
.vortexg-m3-select__trigger:hover .vortexg-m3-select__trigger-state {
	opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.vortexg-m3-menu__trigger:focus-visible,
.vortexg-m3-select__trigger:focus-visible {
	outline: 3px solid var(--md-sys-color-secondary);
	outline-offset: 2px;
}

.vortexg-m3-menu__trigger:focus-visible .vortexg-m3-menu__trigger-state,
.vortexg-m3-select__trigger:focus-visible .vortexg-m3-select__trigger-state {
	opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.vortexg-m3-menu__trigger:active .vortexg-m3-menu__trigger-state,
.vortexg-m3-select__trigger:active .vortexg-m3-select__trigger-state,
.vortexg-m3-menu__trigger[aria-expanded="true"] .vortexg-m3-menu__trigger-state,
.vortexg-m3-select__trigger[aria-expanded="true"] .vortexg-m3-select__trigger-state {
	opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.vortexg-m3-menu__trigger:disabled,
.vortexg-m3-select__trigger:disabled,
.vortexg-m3-menu__trigger[aria-disabled="true"],
.vortexg-m3-select__trigger[aria-disabled="true"] {
	color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
	cursor: default;
}

.vortexg-m3-menu__trigger-label,
.vortexg-m3-select__trigger-label {
	min-width: 0;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vortexg-m3-menu__trigger-icon,
.vortexg-m3-select__trigger-icon {
	display: inline-grid;
	flex: 0 0 24px;
	inline-size: 24px;
	block-size: 24px;
	place-items: center;
}

.vortexg-m3-menu__trigger-icon svg,
.vortexg-m3-select__trigger-icon svg {
	display: block;
	inline-size: 24px;
	block-size: 24px;
}

.vortexg-m3-menu__trigger-icon--chevron,
.vortexg-m3-select__trigger-icon--chevron {
	transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
}

[aria-expanded="true"] > .vortexg-m3-menu__trigger-icon--chevron,
.vortexg-m3-select__trigger[aria-expanded="true"] .vortexg-m3-select__trigger-icon--chevron {
	transform: rotate(180deg);
}

.vortexg-m3-select-field.is-invalid .vortexg-m3-select__trigger {
	outline: 2px solid var(--md-sys-color-error);
	outline-offset: 0;
}

.vortexg-m3-menu__popup {
	position: fixed;
	z-index: 700;
	min-inline-size: 112px;
	max-inline-size: calc(100vw - 16px);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--md-sys-color-on-surface);
	font-family: var(--md-sys-typescale-body-large-font);
	transform: scale(0.8);
	transform-origin: 0 0;
	opacity: 0;
}

.vortexg-m3-menu__popup:not([data-select]):not([data-full-width-popup]) {
	max-inline-size: min(280px, calc(100vw - 16px));
}

.vortexg-m3-menu__popup[data-full-width-popup],
.vortexg-account-compact-nav .vortexg-m3-menu__popup,
.vortexg-m3-menu--full-width .vortexg-m3-menu__popup {
	max-inline-size: calc(100vw - 16px) !important;
}

.vortexg-m3-menu__popup[hidden] {
	display: none !important;
}

.vortexg-m3-menu__surface {
	display: grid;
	padding: 4px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	gap: 2px;
	border-radius: var(--md-sys-shape-corner-large);
	background: var(--md-sys-color-surface-container);
	box-shadow: var(--md-sys-elevation-level-2);
	scrollbar-color:
		color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent)
		transparent;
	scrollbar-width: thin;
}

.vortexg-m3-menu__surface::-webkit-scrollbar {
	inline-size: 8px;
	block-size: 8px;
}

.vortexg-m3-menu__surface::-webkit-scrollbar-track {
	background: transparent;
}

.vortexg-m3-menu__surface::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: var(--md-sys-shape-corner-full);
	background:
		color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent)
		padding-box;
}

@media (forced-colors: active) {
	.vortexg-m3-menu__surface {
		scrollbar-color: auto;
	}
}

.vortexg-m3-menu__group {
	display: grid;
	min-inline-size: 0;
	padding: 0;
	gap: 2px;
	background: transparent;
}

.vortexg-m3-menu__group--vibrant {
	background: transparent;
	color: inherit;
}

.vortexg-m3-menu__group-label {
	min-block-size: 32px;
	padding: 7px 16px 5px;
	color: var(--md-sys-color-on-surface-variant);
	font: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size) / var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);
	letter-spacing: var(--md-sys-typescale-label-small-tracking);
	text-transform: uppercase;
}

.vortexg-m3-menu__group--vibrant .vortexg-m3-menu__group-label {
	color: var(--md-sys-color-on-surface-variant);
}

.vortexg-m3-menu__item-wrap {
	position: relative;
	min-width: 0;
}

.vortexg-m3-menu__item {
	--vortexg-m3-menu-selection-progress: 0;
	--vortexg-m3-menu-selection-percentage: 0%;
	--vortexg-m3-menu-selection-scale: 0.7;

	position: relative;
	display: flex;
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
	padding: 8px 12px 8px 16px;
	overflow: hidden;
	align-items: center;
	gap: 12px;
	border: 0;
	border-radius: var(--md-sys-shape-corner-large);
	background:
		color-mix(
			in srgb,
			var(--md-sys-color-secondary-container) var(--vortexg-m3-menu-selection-percentage),
			transparent
		);
	box-shadow: none;
	color:
		color-mix(
			in srgb,
			var(--md-sys-color-on-secondary-container) var(--vortexg-m3-menu-selection-percentage),
			var(--md-sys-color-on-surface)
		);
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	-webkit-appearance: none;
	appearance: none;
}

.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item,
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item {
	background:
		color-mix(
			in srgb,
			var(--md-sys-color-tertiary-container) var(--vortexg-m3-menu-selection-percentage),
			transparent
		);
	color:
		color-mix(
			in srgb,
			var(--md-sys-color-on-tertiary-container) var(--vortexg-m3-menu-selection-percentage),
			var(--md-sys-color-on-surface)
		);
}

.vortexg-m3-menu__item[aria-current="page"],
.vortexg-m3-menu__item[aria-checked="true"],
.vortexg-m3-menu__item[aria-selected="true"] {
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}

.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item[aria-current="page"],
.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item[aria-checked="true"],
.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item[aria-selected="true"],
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item[aria-current="page"],
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item[aria-checked="true"],
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item[aria-selected="true"] {
	background: var(--md-sys-color-tertiary-container);
	color: var(--md-sys-color-on-tertiary-container);
}

.vortexg-m3-menu__item:hover .vortexg-m3-menu__item-state {
	opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.vortexg-m3-menu__item:focus-visible {
	outline: 3px solid var(--md-sys-color-secondary);
	outline-offset: -3px;
}

.vortexg-m3-menu__item:focus-visible .vortexg-m3-menu__item-state {
	opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.vortexg-m3-menu__item:active .vortexg-m3-menu__item-state {
	opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.vortexg-m3-menu__item[data-vortexg-m3-menu-preview-state="hovered"] .vortexg-m3-menu__item-state {
	opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.vortexg-m3-menu__item[data-vortexg-m3-menu-preview-state="focused"] {
	outline: 3px solid var(--md-sys-color-secondary);
	outline-offset: -3px;
}

.vortexg-m3-menu__item[data-vortexg-m3-menu-preview-state="focused"] .vortexg-m3-menu__item-state {
	opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.vortexg-m3-menu__item[data-vortexg-m3-menu-preview-state="pressed"] .vortexg-m3-menu__item-state {
	opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.vortexg-m3-menu__item:disabled,
.vortexg-m3-menu__item[aria-disabled="true"],
.vortexg-m3-menu__item[data-vortexg-m3-menu-preview-state="disabled"] {
	opacity: 0.38;
	cursor: default;
}

.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item:disabled,
.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item[aria-disabled="true"],
.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item[data-vortexg-m3-menu-preview-state="disabled"],
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item:disabled,
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item[aria-disabled="true"],
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item[data-vortexg-m3-menu-preview-state="disabled"] {
	color: var(--md-sys-color-on-surface);
	opacity: 0.38;
}

.vortexg-m3-menu__item:disabled .vortexg-m3-menu__item-state,
.vortexg-m3-menu__item[aria-disabled="true"] .vortexg-m3-menu__item-state,
.vortexg-m3-menu__item[data-vortexg-m3-menu-preview-state="disabled"] .vortexg-m3-menu__item-state {
	opacity: 0;
}

.vortexg-m3-menu__item-icon,
.vortexg-m3-menu__selection-indicator {
	display: inline-grid;
	flex: 0 0 20px;
	inline-size: 20px;
	block-size: 20px;
	place-items: center;
}

.vortexg-m3-menu__item-leading-content {
	display: inline-grid;
	flex: 0 0 20px;
	inline-size: 20px;
	block-size: 20px;
	place-items: center;
}

.vortexg-m3-menu__item-leading-content > * {
	grid-area: 1 / 1;
}

.vortexg-m3-menu__item-icon svg,
.vortexg-m3-menu__selection-indicator svg {
	display: block;
	inline-size: 20px;
	block-size: 20px;
}

.vortexg-m3-menu__selection-indicator {
	opacity: var(--vortexg-m3-menu-selection-progress);
	transform: scale(var(--vortexg-m3-menu-selection-scale));
}

.vortexg-m3-menu__selection-indicator ~ .vortexg-m3-menu__item-icon--leading {
	opacity: calc(1 - var(--vortexg-m3-menu-selection-progress));
	transform: scale(calc(1 - (var(--vortexg-m3-menu-selection-progress) * 0.3)));
}

.vortexg-m3-menu__item-copy {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	gap: 1px;
}

.vortexg-m3-menu__item-label {
	overflow: hidden;
	font: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size) / var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);
	letter-spacing: var(--md-sys-typescale-body-large-tracking);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vortexg-m3-menu__item-supporting {
	overflow: hidden;
	color:
		color-mix(
			in srgb,
			var(--md-sys-color-on-secondary-container) var(--vortexg-m3-menu-selection-percentage),
			var(--md-sys-color-on-surface-variant)
		);
	font: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);
	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item-supporting,
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item-supporting {
	color:
		color-mix(
			in srgb,
			var(--md-sys-color-on-tertiary-container) var(--vortexg-m3-menu-selection-percentage),
			var(--md-sys-color-on-surface-variant)
		);
}

.vortexg-m3-menu__item-trailing-content {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	justify-self: end;
	gap: 8px;
}

.vortexg-m3-menu__item-trailing {
	color:
		color-mix(
			in srgb,
			var(--md-sys-color-on-secondary-container) var(--vortexg-m3-menu-selection-percentage),
			var(--md-sys-color-on-surface-variant)
		);
	font: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size) / var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);
	letter-spacing: var(--md-sys-typescale-label-small-tracking);
	white-space: nowrap;
}

.vortexg-m3-menu__popup--vibrant .vortexg-m3-menu__item-trailing,
.vortexg-m3-menu--vibrant .vortexg-m3-menu__item-trailing {
	color:
		color-mix(
			in srgb,
			var(--md-sys-color-on-tertiary-container) var(--vortexg-m3-menu-selection-percentage),
			var(--md-sys-color-on-surface-variant)
		);
}

.vortexg-m3-menu__item-badge {
	display: inline-grid;
	min-inline-size: 16px;
	block-size: 16px;
	padding: 0 4px;
	place-items: center;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-error);
	color: var(--md-sys-color-on-error);
	font: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size) / 16px var(--md-sys-typescale-label-small-font);
	letter-spacing: var(--md-sys-typescale-label-small-tracking);
	white-space: nowrap;
	box-sizing: border-box;
}

.vortexg-m3-menu__item-icon--trailing {
	inline-size: 24px;
	block-size: 24px;
}

.vortexg-m3-menu__item-icon--trailing svg {
	inline-size: 24px;
	block-size: 24px;
}

.vortexg-m3-menu__item-icon--submenu {
	inline-size: 24px;
	block-size: 24px;
}

.vortexg-m3-menu__item-icon--submenu svg {
	inline-size: 24px;
	block-size: 24px;
}

[dir="rtl"] .vortexg-m3-menu__item-icon--submenu,
.rtl .vortexg-m3-menu__item-icon--submenu {
	transform: scaleX(-1);
}

.vortexg-m3-menu__divider {
	block-size: 1px;
	margin: 0 8px;
	background: var(--md-sys-color-outline-variant);
}

@media (pointer: coarse) {
	.vortexg-m3-menu__item {
		min-block-size: 48px;
	}

	.vortexg-m3-menu__item-icon--trailing,
	.vortexg-m3-menu__item-icon--submenu,
	.vortexg-m3-menu__item-icon--trailing svg,
	.vortexg-m3-menu__item-icon--submenu svg {
		inline-size: 20px;
		block-size: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vortexg-m3-menu__trigger-icon--chevron,
	.vortexg-m3-select__trigger-icon--chevron {
		transition: none;
	}

	.vortexg-m3-menu__ripple {
		transition: none;
	}
}

/* Compact quantity variant */
.vortexg-m3-menu__popup--compact-quantity,
.vortexg-m3-menu__popup[data-compact-quantity] {
	min-inline-size: 56px !important;
	max-inline-size: 64px !important;
	inline-size: 56px !important;
	width: 56px !important;
}

.vortexg-m3-menu__popup--compact-quantity .vortexg-m3-menu__surface,
.vortexg-m3-menu__popup[data-compact-quantity] .vortexg-m3-menu__surface {
	padding: 4px;
	gap: 2px;
	border-radius: var(--md-sys-shape-corner-small, 8px);
	max-height: 220px;
	overflow-y: auto;
}

.vortexg-m3-menu__popup--compact-quantity .vortexg-m3-menu__item,
.vortexg-m3-menu__popup[data-compact-quantity] .vortexg-m3-menu__item {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-block-size: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	gap: 0 !important;
	border-radius: var(--md-sys-shape-corner-extra-small, 4px) !important;
	font: var(--md-sys-typescale-label-large-weight, 700) 13px / 30px var(--md-sys-typescale-label-large-font);
	text-align: center !important;
	cursor: pointer !important;
}

.vortexg-m3-menu__popup--compact-quantity .vortexg-m3-menu__item-leading-content,
.vortexg-m3-menu__popup[data-compact-quantity] .vortexg-m3-menu__item-leading-content {
	display: none !important;
}

.vortexg-m3-menu__popup--compact-quantity .vortexg-m3-menu__item-copy,
.vortexg-m3-menu__popup[data-compact-quantity] .vortexg-m3-menu__item-copy {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
}

.vortexg-m3-menu__popup--compact-quantity .vortexg-m3-menu__item-label,
.vortexg-m3-menu__popup[data-compact-quantity] .vortexg-m3-menu__item-label {
	font-size: 13px !important;
	font-weight: 700 !important;
	text-align: center !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
}