/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import "./themes/spectrum-two.css";

@media (forced-colors: active) {
	.spectrum-Menu {
		--highcontrast-menu-item-background-color-default: ButtonFace;
		--highcontrast-menu-item-color-default: ButtonText;

		--highcontrast-menu-item-background-color-focus: Highlight;
		--highcontrast-menu-item-color-focus: HighlightText;

		--highcontrast-menu-checkmark-icon-color-default: Highlight;

		--highcontrast-menu-item-color-disabled: GrayText;
		--highcontrast-menu-item-focus-indicator-color: Highlight;

		--highcontrast-menu-item-selected-background-color: Highlight;
		--highcontrast-menu-item-selected-color: HighlightText;

		@supports (color: SelectedItem) {
			--highcontrast-menu-item-selected-background-color: SelectedItem;
			--highcontrast-menu-item-selected-color: SelectedItemText;
		}

		.spectrum-Menu-item {
			/* Hide unstylable readability backplates. */
			forced-color-adjust: none;
		}

		.spectrum-Menu-item:hover,
		.spectrum-Menu-item:focus {
			.spectrum-Menu-itemCheckbox {
				/* @passthrough start */
				--highcontrast-checkbox-highlight-color-hover: ButtonText;
				--highcontrast-checkbox-highlight-color-default: ButtonText;
				/* @passthrough end */
			}

			.spectrum-Menu-itemSwitch {
				/* @passthrough start */
				--highcontrast-switch-handle-border-color-hover: ButtonText;
				--highcontrast-switch-handle-border-color-selected-default: ButtonText;
				--highcontrast-switch-handle-border-color-selected-hover: ButtonText;
				--highcontrast-switch-background-color-selected-default: ButtonText;
				--highcontrast-switch-background-color-selected-hover: ButtonText;
				/* @passthrough end */
			}
		}

		.spectrum-Menu-item--drillIn.is-open {
			--highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color);
			--highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color);
		}

		.spectrum-Menu-item--collapsible.is-open {
			&:hover,
			&:focus-within {
				box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
			}

			&:hover,
			&:active,
			&:focus,
			&.is-focused {
				--highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default);
			}
		}
	}
}

.spectrum-Menu {
	--spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
	--spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);

	--spectrum-menu-item-label-line-height: var(--spectrum-line-height-100);
	--spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
	--spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description);
	--spectrum-menu-item-focus-indicator-width: var(--mod-menu-item-focus-indicator-width, var(--spectrum-border-width-200));
	--spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800);
	--spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100);

	--spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default);
	--spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover);
	--spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down);
	--spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus);

	--spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default);
	--spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover);
	--spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down);
	--spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);

	--spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color);
	--spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color);

	--spectrum-menu-item-description-line-height: var(--spectrum-line-height-100);
	--spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100);

	--spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default);
	--spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
	--spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down);
	--spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
	--spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color);

	--spectrum-menu-section-header-line-height: var(--spectrum-line-height-100);
	--spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
	--spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
	--spectrum-menu-section-header-color: var(--spectrum-gray-900);
	--spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900);

	--spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900);
	--spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
	--spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
	--spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000);

	--spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
	--spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
	--spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
	--spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);

	--spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default);
	--spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
	--spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down);
	--spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);

	--spectrum-menu-checkmark-display-hidden: none;
	--spectrum-menu-checkmark-display-shown: block;
	--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);

	--spectrum-menu-item-min-height: var(--spectrum-component-height-100);
	--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
	--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
	--spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
	--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);

	--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
	--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
	--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);

	--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100);

	--spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);

	--spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
	--spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);

	--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);

	--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium);
	--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
	--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);

	--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium);

	/* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */
	--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width)));

	--spectrum-menu-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
	--spectrum-menu-item-focus-indicator-border-width: calc(var(--spectrum-menu-item-focus-indicator-width) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1));

	&.spectrum-Menu--sizeS {
		--spectrum-menu-item-min-height: var(--spectrum-component-height-75);
		--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75);
		--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
		--spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
		--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);

		--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
		--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
		--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);

		--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75);

		--spectrum-menu-item-description-font-size: var(--spectrum-font-size-50);

		--spectrum-menu-section-header-font-size: var(--spectrum-font-size-75);
		--spectrum-menu-section-header-min-width: var(--spectrum-component-height-75);

		--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);

		--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small);
		--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small);
		--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small);

		--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
	}

	&.spectrum-Menu--sizeL {
		--spectrum-menu-item-min-height: var(--spectrum-component-height-200);
		--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200);
		--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
		--spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
		--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);

		--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
		--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
		--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);

		--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200);

		--spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);

		--spectrum-menu-section-header-font-size: var(--spectrum-font-size-200);
		--spectrum-menu-section-header-min-width: var(--spectrum-component-height-200);

		--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);

		--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large);
		--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large);
		--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large);

		--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large);
	}

	&.spectrum-Menu--sizeXL {
		--spectrum-menu-item-min-height: var(--spectrum-component-height-300);
		--spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300);
		--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
		--spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
		--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);

		--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
		--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
		--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);

		--spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300);

		--spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);

		--spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
		--spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);

		--spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);

		--spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large);
		--spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large);
		--spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large);

		--spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
	}

	&:dir(rtl) {
		--spectrum-menu-item-focus-indicator-direction-scalar: -1;
	}
}

.spectrum-Menu {
	display: inline-block;
	inline-size: var(--mod-menu-inline-size, auto);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: auto;

	&:lang(ja),
	&:lang(zh),
	&:lang(ko) {
		--spectrum-menu-item-label-line-height: var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk));
		--spectrum-menu-item-description-line-height: var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk));
		--spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk));
	}

	/* Menus with "selectable" menu items. */
	&.is-selectable {
		/* Provide inline-start spacing for potential checkmarks. */
		.spectrum-Menu-item {
			--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden);

			padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected));

			/* Remove inline-start spacing once an item is selected and a checkmark appears. */
			&.is-selected {
				--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);

				padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
			}
		}
	}

	&.is-selectableMultiple {
		.spectrum-Menu-item {
			align-items: start;
		}

		.spectrum-Menu-itemCheckbox {
			grid-area: checkmarkArea;
		}
	}

	.spectrum-Menu-divider {
		--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium);

		&.spectrum-Divider--sizeS {
			--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-small);
		}

		overflow: visible;
		inline-size: auto;
		margin-block: var(--mod-menu-section-divider-margin-block, max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2));
		margin-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
	}

	/* Icons */
	.spectrum-Menu-itemIcon {
		fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));
		color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));

		grid-area: iconArea;
		align-self: start;
	}

	.spectrum-Menu-checkmark {
		display: var(--mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display));
		block-size: var(--mod-menu-item-checkmark-height, var(--spectrum-menu-item-checkmark-height));
		inline-size: var(--mod-menu-item-checkmark-width, var(--spectrum-menu-item-checkmark-width));

		fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default)));
		color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default)));
		opacity: 1;

		margin-block-start: calc(var(--mod-menu-item-top-to-checkmark, var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));

		/* Checkmarks have text or an icon directly next to them. */
		margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));

		grid-area: checkmarkArea;
		align-self: start;
	}

	.spectrum-Menu-chevron {
		block-size: var(--spectrum-menu-item-checkmark-height);
		inline-size: var(--spectrum-menu-item-checkmark-width);

		/* Chevrons (aka collapsibles) have text or an icon directly next to them. */
		margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));

		grid-area: chevronArea;
		align-self: center;

		&:dir(rtl) {
			transform: rotate(-180deg);
		}
	}

	.spectrum-Menu-backIcon {
		margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin));
		margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin));
		fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
		color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
	}

	.spectrum-Menu-itemIcon--workflowIcon {
		/* Always provide space at the end of a workflow icon. */
		margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual));
	}

	.spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
		block-size: var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height));
		inline-size: var(--mod-menu-item-icon-width, var(--spectrum-menu-item-icon-width));
	}

	/* Presentational list items for sections and dividers. */
	li:not(.spectrum-Menu-item, .spectrum-Menu-divider) {
		display: block;
		position: relative;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
}

.spectrum-Menu-item {
	cursor: pointer;
	position: relative;
	align-items: center;

	border-radius: var(--spectrum-menu-item-corner-radius);

	box-sizing: border-box;

	background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));

	line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height));

	min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height));

	padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text));
	padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text));
	padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));

	margin: calc((var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-spacing-multiplier));
	text-decoration: none;

	display: grid;

	grid-template-areas:
		".            chevronAreaCollapsible .             headingIconArea  sectionHeadingArea  .         .           .                 "
		"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea        valueArea actionsArea chevronAreaDrillIn"
		".            .                      .             .        descriptionArea  .         .           .                 "
		".            .                      .             .        submenuArea      .         .           .                 ";

	grid-template-columns: auto auto auto auto 1fr auto auto auto;
	grid-template-rows: 1fr auto;

	.spectrum-Menu-itemCheckbox {
		--mod-checkbox-top-to-text: 0;
		--mod-checkbox-text-to-control: 0;

		min-block-size: 0;

		.spectrum-Checkbox-box {
			margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
			margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox));
			margin-block-end: 0;
		}
	}

	.spectrum-Menu-itemSwitch {
		min-block-size: 0;

		.spectrum-Switch-switch {
			margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action));
			margin-block-end: 0;
		}
	}

	.spectrum-Menu-item {
		display: grid;
		grid-template-areas: "submenuItemLabelArea submenuItemValueArea";
		grid-template-columns: auto auto;
		grid-template-rows: 1fr auto;

		.spectrum-Menu-itemLabel {
			grid-area: submenuItemLabelArea;
		}

		.spectrum-Menu-itemValue {
			grid-area: submenuItemValueArea;
		}
	}

	&:focus,
	&.is-focused {
		background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus)));
		outline: none;

		> .spectrum-Menu-itemLabel {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus)));
		}

		> .spectrum-Menu-sectionHeading {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
		}

		> .spectrum-Menu-itemDescription {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus)));
		}

		> .spectrum-Menu-itemValue {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
		}

		> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
		}

		> .spectrum-Menu-chevron {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
		}

		> .spectrum-Menu-checkmark {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)));
		}
	}

	&:hover {
		background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));

		> .spectrum-Menu-itemLabel {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover)));
		}

		> .spectrum-Menu-sectionHeading {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
		}

		> .spectrum-Menu-itemDescription {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover)));
		}

		> .spectrum-Menu-itemValue {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
		}

		> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
		}

		> .spectrum-Menu-chevron {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
		}

		> .spectrum-Menu-checkmark {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
		}
	}

	&:active {
		background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down)));

		> .spectrum-Menu-itemLabel {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
		}

		> .spectrum-Menu-sectionHeading {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
		}

		> .spectrum-Menu-itemDescription {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down)));
		}

		> .spectrum-Menu-itemValue {
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
		}

		> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
		}

		> .spectrum-Menu-chevron {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color)));
		}

		> .spectrum-Menu-checkmark {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down)));
		}
	}

	/* Disabled menu items */
	&.is-disabled,
	&[aria-disabled="true"] {
		background-color: transparent;

		.spectrum-Menu-itemLabel,
		.spectrum-Menu-sectionHeading,
		.spectrum-Menu-itemValue {
			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
		}

		.spectrum-Menu-itemDescription {
			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
		}

		.spectrum-Menu-itemIcon {
			color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
			fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
		}

		&:hover {
			cursor: default;
			background-color: transparent;

			.spectrum-Menu-itemLabel,
			.spectrum-Menu-sectionHeading,
			.spectrum-Menu-itemValue {
				color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
			}

			.spectrum-Menu-itemDescription {
				color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
			}

			.spectrum-Menu-itemIcon {
				color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
				fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
			}
		}
	}
}

.spectrum-Menu-item:focus-visible,
.spectrum-Menu-back:focus-visible {
	box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
	outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
	outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
	border-radius: var(--spectrum-menu-item-corner-radius);
}

.spectrum-Menu-itemSelection {
	grid-area: selectedArea;
}

.spectrum-Menu-itemLabel {
	/* @passthrough start -- Switch spacing overrides */
	--mod-switch-control-label-spacing: 0;
	--mod-switch-spacing-top-to-label: 0;
	/* @passthrough end */

	grid-area: labelArea;
	font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default)));

	hyphens: auto;
	overflow-wrap: break-word;
}

.spectrum-Menu-itemValue {
	grid-area: valueArea;
	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default)));
	font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
	justify-self: end;
	align-self: start;
	margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
}

.spectrum-Menu-itemActions {
	grid-area: actionsArea;
	align-self: start;
	margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
}

.spectrum-Menu-sectionHeading {
	grid-area: sectionHeadingArea;
	grid-column: 1 / -1;
	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
	display: block;
	font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
	font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
	line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
	min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width));
	padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
	padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
	padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
}

.spectrum-Menu-itemDescription {
	grid-area: descriptionArea;
	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default)));
	font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size));
	hyphens: auto;
	overflow-wrap: break-word;
	margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description-spacing));
	line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height));
}

.spectrum-Menu-itemLabel--truncate {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.spectrum-Menu-item--collapsible {
	.spectrum-Menu-sectionHeading {
		/*
		start at 5th column, to account for icons & match sectionHeadingArea
		". chevronAreaCollapsible . iconArea sectionHeadingArea  .  .  ."
		stretch to last column
		*/
		grid-column: 5 / -1;

		padding-inline: 0;
	}

	/* collapsible sub-menus */
	&.is-open {
		padding-block-end: 0;

		.spectrum-Menu-chevron {
			transform: rotate(90deg);
		}
	}

	&.is-open:hover,
	&.is-open:active,
	&.is-open:focus,
	&.is-open.is-focused {
		background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
	}

	.spectrum-Menu-itemIcon {
		grid-area: headingIconArea;
	}

	> .spectrum-Menu-itemIcon {
		padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
		padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
	}

	.spectrum-Menu-chevron {
		grid-area: chevronAreaCollapsible;
	}

	/*
	assume that if an item is collapsible, it will
	have a chevron and we need to adjust position of submenu items to account for that
	*/
	.spectrum-Menu {
		display: none;

		/* reposition the entire submenu to be flush left with the parent menu item via negative margins */
		margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1);

		&.is-open {
			display: block;
		}

		.spectrum-Menu-item {
			/*
			allow item to take up full width of parent,
			but make the content start where the parent item's label text starts
			*/
			padding-inline-start: var(--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start, var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start));
		}
	}
}

.spectrum-Menu-item--collapsible .spectrum-Menu,
.spectrum-Menu-item .spectrum-Menu {
	grid-area: submenuArea;
	grid-column: 1 / -1;
}

.spectrum-Menu-item--drillIn {
	.spectrum-Menu-chevron {
		grid-area: chevronAreaDrillIn;
		fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default)));
		color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default)));
		margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
		margin-inline-end: 0;
	}

	&.is-open {
		--spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)));

		.spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
		}

		.spectrum-Menu-chevron {
			fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
			color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
		}

		.spectrum-Menu-checkmark {
			fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
			color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover)));
		}
	}

	&:hover .spectrum-Menu-chevron {
		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
	}

	&:focus .spectrum-Menu-chevron,
	&.is-focused .spectrum-Menu-chevron {
		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
	}

	&:active .spectrum-Menu-chevron {
		fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
		color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
	}
}

/* Tray submenu */
.spectrum-Menu-back {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
	padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);

	.spectrum-Menu-sectionHeading {
		padding: 0;
	}
}

.spectrum-Menu-backButton {
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	display: inline-flex;
	cursor: pointer;

	&:focus-visible {
		outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
		outline-offset: calc(-1 * (var(--spectrum-focus-indicator-thickness) + 1px));
	}
}

.spectrum-Menu-backHeading {
	display: block;
	color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
	font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
	font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
	line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
}
