@spectrum-css/menu
Version:
The Spectrum CSS menu component
646 lines (644 loc) • 41.7 kB
CSS
/*!
* 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.
*/
@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) {
.spectrum-Menu {
--highcontrast-menu-item-selected-background-color: SelectedItem;
--highcontrast-menu-item-selected-color: SelectedItemText;
}
}
.spectrum-Menu .spectrum-Menu-item {
forced-color-adjust: none;
}
.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox {
--highcontrast-checkbox-highlight-color-hover: ButtonText;
--highcontrast-checkbox-highlight-color-default: ButtonText;
}
.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch {
--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;
}
.spectrum-Menu .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 .spectrum-Menu-item--collapsible.is-open: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);
}
.spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused,
.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active,
.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus {
--highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default);
}
@media (hover: hover) {
.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox {
--highcontrast-checkbox-highlight-color-hover: ButtonText;
--highcontrast-checkbox-highlight-color-default: ButtonText;
}
.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch {
--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;
}
.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover {
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);
--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);
--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.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.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.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);
}
.spectrum-Menu:dir(rtl),
[dir="rtl"] .spectrum-Menu {
--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;
}
.spectrum-Menu:lang(ja),
.spectrum-Menu:lang(ko),
.spectrum-Menu:lang(zh) {
--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));
}
.spectrum-Menu.is-selectable .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));
}
.spectrum-Menu.is-selectable .spectrum-Menu-item.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));
}
.spectrum-Menu.is-selectableMultiple .spectrum-Menu-item {
align-items: start;
}
.spectrum-Menu.is-selectableMultiple .spectrum-Menu-itemCheckbox {
grid-area: checkmarkArea;
}
.spectrum-Menu .spectrum-Menu-divider {
--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium);
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));
}
.spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS {
--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-small);
}
.spectrum-Menu .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 .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)));
grid-area: checkmarkArea;
align-self: start;
}
.spectrum-Menu .spectrum-Menu-checkmark,
.spectrum-Menu .spectrum-Menu-chevron {
margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
}
.spectrum-Menu .spectrum-Menu-chevron {
block-size: var(--spectrum-menu-item-checkmark-height);
inline-size: var(--spectrum-menu-item-checkmark-width);
grid-area: chevronArea;
align-self: center;
}
.spectrum-Menu .spectrum-Menu-chevron:dir(rtl),
[dir="rtl"] .spectrum-Menu .spectrum-Menu-chevron {
transform: rotate(-180deg);
}
.spectrum-Menu .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 .spectrum-Menu-itemIcon--workflowIcon {
margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual));
}
.spectrum-Menu .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));
}
.spectrum-Menu 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));
-webkit-text-decoration: none;
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-item .spectrum-Menu-itemCheckbox {
--mod-checkbox-top-to-text: 0;
--mod-checkbox-text-to-control: 0;
min-block-size: 0;
}
.spectrum-Menu-item .spectrum-Menu-itemCheckbox .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-item .spectrum-Menu-itemSwitch {
min-block-size: 0;
}
.spectrum-Menu-item .spectrum-Menu-itemSwitch .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 .spectrum-Menu-item {
display: grid;
grid-template-areas: "submenuItemLabelArea submenuItemValueArea";
grid-template-columns: auto auto;
grid-template-rows: 1fr auto;
}
.spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemLabel {
grid-area: submenuItemLabelArea;
}
.spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemValue {
grid-area: submenuItemValueArea;
}
.spectrum-Menu-item.is-focused,
.spectrum-Menu-item:focus {
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-item.is-focused > .spectrum-Menu-itemLabel,
.spectrum-Menu-item:focus > .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-item.is-focused > .spectrum-Menu-sectionHeading,
.spectrum-Menu-item: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-item.is-focused > .spectrum-Menu-itemDescription,
.spectrum-Menu-item:focus > .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-item.is-focused > .spectrum-Menu-itemValue,
.spectrum-Menu-item: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-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark),
.spectrum-Menu-item: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-item.is-focused > .spectrum-Menu-chevron,
.spectrum-Menu-item: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-item.is-focused > .spectrum-Menu-checkmark,
.spectrum-Menu-item:focus > .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)));
}
.spectrum-Menu-item: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-item:active > .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-item:active > .spectrum-Menu-sectionHeading {
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
}
.spectrum-Menu-item:active > .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-item:active > .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-item:active > .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-item:active > .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-item:active > .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)));
}
.spectrum-Menu-item.is-disabled,
.spectrum-Menu-item[aria-disabled="true"] {
background-color: initial;
}
.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel,
.spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue,
.spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading,
.spectrum-Menu-item[aria-disabled="true"] .spectrum-Menu-itemLabel,
.spectrum-Menu-item[aria-disabled="true"] .spectrum-Menu-itemValue,
.spectrum-Menu-item[aria-disabled="true"] .spectrum-Menu-sectionHeading {
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-item.is-disabled .spectrum-Menu-itemDescription,
.spectrum-Menu-item[aria-disabled="true"] .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-item.is-disabled .spectrum-Menu-itemIcon,
.spectrum-Menu-item[aria-disabled="true"] .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-back:focus-visible,
.spectrum-Menu-item: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 {
--mod-switch-control-label-spacing: 0;
--mod-switch-spacing-top-to-label: 0;
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;
}
.spectrum-Menu-itemActions,
.spectrum-Menu-itemValue {
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;
}
.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 {
grid-column: 5/-1;
padding-inline: 0;
}
.spectrum-Menu-item--collapsible.is-open {
padding-block-end: 0;
}
.spectrum-Menu-item--collapsible.is-open .spectrum-Menu-chevron {
transform: rotate(90deg);
}
.spectrum-Menu-item--collapsible.is-open.is-focused,
.spectrum-Menu-item--collapsible.is-open:active,
.spectrum-Menu-item--collapsible.is-open:focus {
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-item--collapsible .spectrum-Menu-itemIcon {
grid-area: headingIconArea;
}
.spectrum-Menu-item--collapsible > .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-item--collapsible .spectrum-Menu-chevron {
grid-area: chevronAreaCollapsible;
}
.spectrum-Menu-item--collapsible .spectrum-Menu {
display: none;
margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1);
}
.spectrum-Menu-item--collapsible .spectrum-Menu.is-open {
display: block;
}
.spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item {
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 .spectrum-Menu,
.spectrum-Menu-item--collapsible .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;
}
.spectrum-Menu-item--drillIn.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-item--drillIn.is-open .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-item--drillIn.is-open .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-item--drillIn.is-open .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)));
}
@media (hover: hover) {
.spectrum-Menu-item: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-item: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-item: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-item:hover > .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-item: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-item: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-item: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-item:hover > .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)));
}
.spectrum-Menu-item.is-disabled:hover,
.spectrum-Menu-item[aria-disabled="true"]:hover {
cursor: default;
background-color: initial;
}
.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel,
.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue,
.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading,
.spectrum-Menu-item[aria-disabled="true"]:hover .spectrum-Menu-itemLabel,
.spectrum-Menu-item[aria-disabled="true"]:hover .spectrum-Menu-itemValue,
.spectrum-Menu-item[aria-disabled="true"]:hover .spectrum-Menu-sectionHeading {
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-item.is-disabled:hover .spectrum-Menu-itemDescription,
.spectrum-Menu-item[aria-disabled="true"]:hover .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-item.is-disabled:hover .spectrum-Menu-itemIcon,
.spectrum-Menu-item[aria-disabled="true"]:hover .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--collapsible.is-open:hover {
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-item--drillIn: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-item--drillIn.is-focused .spectrum-Menu-chevron,
.spectrum-Menu-item--drillIn:focus .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)));
}
.spectrum-Menu-item--drillIn: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)));
}
.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-back .spectrum-Menu-sectionHeading {
padding: 0;
}
.spectrum-Menu-backButton {
padding: 0;
margin: 0;
background: transparent;
border: 0;
display: inline-flex;
cursor: pointer;
}
.spectrum-Menu-backButton:focus-visible {
outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
}
.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));
}