npm - carbon-react - Versions diffs - 158.14.0 → 158.14.1 - Mend

carbon-react 158.14.0 → 158.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/esm/components/tokens-wrapper/__internal__/static-tokens/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- var e="\n --global-borderwidth-none: 0;\n --global-borderwidth-xs: 1px;\n --global-borderwidth-s: 2px;\n --global-borderwidth-m: 3px;\n --global-borderwidth-l: 4px;\n --global-borderwidth-xl: 6px;\n --global-borderwidth-xxl: 8px;\n --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;\n --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;\n --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-icon-s: 20px sage-icons;\n --global-font-fluid-comp-icon-m: 20px sage-icons;\n --global-font-fluid-comp-icon-l: 20px sage-icons;\n --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;\n --global-font-static-heading-s: 500 21px/1.25 Sage UI;\n --global-font-static-heading-m: 700 24px/1.25 Sage UI;\n --global-font-static-heading-l: 700 30px/1.25 Sage UI;\n --global-font-static-subheading-m: 500 16px/1.25 Sage UI;\n --global-font-static-subheading-l: 500 18px/1.25 Sage UI;\n --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;\n --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;\n --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;\n --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;\n --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-icon-s: 20px sage-icons;\n --global-font-static-comp-icon-m: 20px sage-icons;\n --global-font-static-comp-icon-l: 20px sage-icons;\n --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;\n --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;\n --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;\n --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;\n --global-modifier-button-active: 0.30;\n --global-modifier-button-active-alt: 0.15;\n --global-modifier-button-hover: 0.15;\n --global-modifier-button-hover-alt: 0.10;\n --global-modifier-input-disabled-fg: 0.3;\n --global-modifier-input-disabled-bg: 0.05;\n --global-radius-none: 0;\n --global-radius-container3xs: 1px;\n --global-radius-container2xs: 2px;\n --global-radius-container-xs: 4px;\n --global-radius-container-s: 6px;\n --global-radius-container-m: 8px;\n --global-radius-container-l: 16px;\n --global-radius-container-xl: 24px;\n --global-radius-container2xl: 32px;\n --global-radius-container3xl: 40px;\n --global-radius-container4xl: 80px;\n --global-radius-container-circle: 999px;\n --global-radius-action2xs: 1px;\n --global-radius-action-xs: 2px;\n --global-radius-action-s: 4px;\n --global-radius-action-m: 8px;\n --global-radius-action-l: 16px;\n --global-radius-action-xl: 20px;\n --global-radius-action2xl: 24px;\n --global-radius-action-circle: 999px;\n --global-depth-none: dropShadow 0 0 0 0 rgba(0,0,0,0);\n --global-depth-lvl1: dropShadow 0 1px 2px 0 #0000001A, dropShadow 2px 2px 10px 0 #00000033;\n --global-depth-lvl2: dropShadow 0 2px 3px 0 #0000001A, dropShadow 6px 6px 30px 0 #00000026;\n --global-depth-lvl3: dropShadow 0 3px 4px 0 #0000001A, dropShadow 10px 10px 60px 0 #0000001A;\n --global-depth-sticky-b: dropShadow 0 -1px 2px 0 #0000001A, dropShadow 2px -2px 10px 0 #00000033;\n --global-depth-sticky-l: dropShadow -2px 0 2px 0 #0000001A, dropShadow -5px 0 5px 0 #0000001A;\n --global-depth-sticky-r: dropShadow 2px 0 2px 0 #0000001A, dropShadow 5px 0 5px 0 #0000001A;\n --global-size-none: 0px;\n --global-size6xs: 2px;\n --global-size5xs: 4px;\n --global-size4xs: 8px;\n --global-size3xs: 16px;\n --global-size2xs: 20px;\n --global-size-xs: 24px;\n --global-size-s: 32px;\n --global-size-m: 40px;\n --global-size-l: 48px;\n --global-size-xl: 56px;\n --global-size2xl: 64px;\n --global-size3xl: 72px;\n --global-size4xl: 80px;\n --global-space-none: 0px;\n --global-space-layout3xs: 8px;\n --global-space-layout2xs: 16px;\n --global-space-layout-xs: 24px;\n --global-space-layout-s: 32px;\n --global-space-layout-m: 40px;\n --global-space-layout-l: 48px;\n --global-space-layout-xl: 56px;\n --global-space-layout2xl: 64px;\n --global-space-layout3xl: 72px;\n --global-space-layout4xl: 80px;\n --global-space-comp2xs: 2px;\n --global-space-comp-xs: 4px;\n --global-space-comp-s: 8px;\n --global-space-comp-m: 12px;\n --global-space-comp-l: 16px;\n --global-space-comp-xl: 24px;\n --global-space-comp2xl: 32px;\n --mode-color-none: #fff0;\n --mode-color-ai-stop1: #13a038;\n --mode-color-ai-stop2: #149197;\n --mode-color-ai-stop3: #a87cfb;\n --mode-color-ai-alt-stop1: #00d639;\n --mode-color-ai-alt-stop2: #00d6de;\n --mode-color-ai-alt-stop3: #9d60ff;\n --mode-color-brand-default: #000000;\n --mode-color-brand-default-alt: #000000;\n --mode-color-brand-with-default-alt: #FFFFFF;\n --mode-color-brand-inverse-default: #00d639;\n --mode-color-brand-inverse-default-alt: #FFFFFF;\n --mode-color-brand-inverse-with-default-alt: #000000;\n --mode-color-brand-copilot-default: #000000;\n --mode-color-brand-copilot-monochrome: #000000;\n --mode-color-brand-copilot-with-default: #00d639;\n --mode-color-brand-copilot-inverse-default: #FFFFFF;\n --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;\n --mode-color-brand-copilot-inverse-with-default: #00d639;\n --mode-color-colorcode-blue-deep: #0071c3;\n --mode-color-colorcode-blue-muted: #e4eeff;\n --mode-color-colorcode-teal-deep: #007C7B;\n --mode-color-colorcode-teal-muted: #C8F5F5;\n --mode-color-colorcode-green-deep: #00811F;\n --mode-color-colorcode-green-muted: #D1F6D6;\n --mode-color-colorcode-lime-deep: #627600;\n --mode-color-colorcode-lime-muted: #e8f1d4;\n --mode-color-colorcode-orange-deep: #d64309;\n --mode-color-colorcode-orange-muted: #ffeaca;\n --mode-color-colorcode-red-deep: #db004e;\n --mode-color-colorcode-red-muted: #ffe8ea;\n --mode-color-colorcode-pink-deep: #c72699;\n --mode-color-colorcode-pink-muted: #fee8f5;\n --mode-color-colorcode-purple-deep: #8f4bd7;\n --mode-color-colorcode-purple-muted: #F3EBFE;\n --mode-color-colorcode-slate-deep: #527386;\n --mode-color-colorcode-slate-muted: #e4eff5;\n --mode-color-colorcode-gray-deep: #6f6f6f;\n --mode-color-colorcode-gray-muted: #eeeeee;\n --mode-color-generic-bg-nought: #FFFFFF;\n --mode-color-generic-bg-faint: #0000000a;\n --mode-color-generic-bg-delicate: #00000014;\n --mode-color-generic-bg-soft: #0000001e;\n --mode-color-generic-bg-moderate: #00000029;\n --mode-color-generic-bg-firm: #0000003d;\n --mode-color-generic-bg-harsh: #00000052;\n --mode-color-generic-bg-severe: #0006;\n --mode-color-generic-bg-extreme: #000000;\n --mode-color-generic-bg-inverse-nought: #000000;\n --mode-color-generic-bg-inverse-faint: #ffffff0a;\n --mode-color-generic-bg-inverse-delicate: #ffffff14;\n --mode-color-generic-bg-inverse-soft: #ffffff1e;\n --mode-color-generic-bg-inverse-moderate: #ffffff29;\n --mode-color-generic-bg-inverse-firm: #ffffff3d;\n --mode-color-generic-bg-inverse-harsh: #ffffff52;\n --mode-color-generic-bg-inverse-severe: #fff6;\n --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-extreme: #000000;\n --mode-color-generic-txt-severe: #000000f2;\n --mode-color-generic-txt-moderate: #000000a6;\n --mode-color-generic-txt-soft: #0000008c;\n --mode-color-generic-txt-delicate: #0000006b;\n --mode-color-generic-txt-faint: #0000004d;\n --mode-color-generic-txt-nought: #FFFFFF;\n --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-inverse-severe: #fffffff2;\n --mode-color-generic-txt-inverse-moderate: #ffffffab;\n --mode-color-generic-txt-inverse-soft: #ffffff8c;\n --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n --mode-color-generic-txt-inverse-faint: #ffffff4d;\n --mode-color-generic-txt-inverse-nought: #000000;\n --mode-color-generic-fg-nought: #FFFFFF;\n --mode-color-generic-fg-delicate: #eeeeee;\n --mode-color-generic-fg-soft: #a0a0a0;\n --mode-color-generic-fg-moderate: #8b8b8b;\n --mode-color-generic-fg-firm: #7c7c7c;\n --mode-color-generic-fg-extreme: #000000;\n --mode-color-generic-fg-inverse-nought: #000000;\n --mode-color-generic-fg-inverse-delicate: #181818;\n --mode-color-generic-fg-inverse-soft: #505050;\n --mode-color-generic-fg-inverse-moderate: #616161;\n --mode-color-generic-fg-inverse-firm: #6f6f6f;\n --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n --mode-color-generic-surface-nought: #FFFFFF;\n --mode-color-generic-surface-faint: #f4f4f4;\n --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);\n --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);\n --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-action-ai-active-stop1: #13a03826;\n --mode-color-action-ai-active-stop2: #14919726;\n --mode-color-action-ai-active-stop3: #a87cfb26;\n --mode-color-action-ai-hover-stop1: #13a03814;\n --mode-color-action-ai-hover-stop2: #14919714;\n --mode-color-action-ai-hover-stop3: #a87cfb14;\n --mode-color-action-danger-active: #a30037;\n --mode-color-action-danger-default: #db004e;\n --mode-color-action-danger-default-alt: #c40044;\n --mode-color-action-danger-hover: #c40044;\n --mode-color-action-danger-hover-alt: #db004e26;\n --mode-color-action-danger-hover-alt2: #a30037;\n --mode-color-action-danger-with-active: #FFFFFF;\n --mode-color-action-danger-with-default: #FFFFFF;\n --mode-color-action-danger-inverse-active: #ff728d;\n --mode-color-action-danger-inverse-default: #f50059;\n --mode-color-action-danger-inverse-default-alt: #ff3e6a;\n --mode-color-action-danger-inverse-hover: #ff3e6a;\n --mode-color-action-danger-inverse-hover-alt: #f5005926;\n --mode-color-action-danger-inverse-hover-alt2: #ff728d;\n --mode-color-action-danger-inverse-with-active: #000000;\n --mode-color-action-danger-inverse-with-default: #000000;\n --mode-color-action-data-entry-default: #FFFFFF;\n --mode-color-action-data-entry-with-active: #000000;\n --mode-color-action-data-entry-with-active-alt: #FFFFFF;\n --mode-color-action-data-entry-with-hover: #000000;\n --mode-color-action-data-entry-hover-alt: #0000001a;\n --mode-color-action-data-entry-with-default: #7c7c7c;\n --mode-color-action-data-entry-default-alt: #f4f9fc;\n --mode-color-action-data-entry-txt: #000000f2;\n --mode-color-action-data-entry-txt-alt: #0000008c;\n --mode-color-action-data-entry-inverse-default: #000000;\n --mode-color-action-data-entry-inverse-with-default: #6f6f6f;\n --mode-color-action-data-entry-inverse-txt: #fffffff2;\n --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;\n --mode-color-action-focus-default: #000000;\n --mode-color-action-focus-txt: #000000;\n --mode-color-action-focus-with-default: #FFB500;\n --mode-color-action-focus-with-default-alt: #ffd274;\n --mode-color-action-focus-inverse-default: #FFB500;\n --mode-color-action-focus-inverse-txt: #FFFFFF;\n --mode-color-action-focus-inverse-with-default: #000000;\n --mode-color-action-focus-inverse-with-default-alt: #885e00;\n --mode-color-action-inactive-default: #0000004d;\n --mode-color-action-inactive-mask: #0006;\n --mode-color-action-inactive-default-alt: #eeeeee;\n --mode-color-action-inactive-txt: #0000006b;\n --mode-color-action-inactive-txt-alt: #FFFFFF;\n --mode-color-action-inactive-icon: #0000006b;\n --mode-color-action-inactive-icon-alt: #0000008c;\n --mode-color-action-inactive-inverse-default: #ffffff4d;\n --mode-color-action-inactive-inverse-txt: #ffffff6b;\n --mode-color-action-inactive-inverse-txt-alt: #000000;\n --mode-color-action-grayscale-active: #000000;\n --mode-color-action-grayscale-active-alt: #00000026;\n --mode-color-action-grayscale-default: #000000e6;\n --mode-color-action-grayscale-default-alt: #000000ab;\n --mode-color-action-grayscale-hover-alt: #0000001a;\n --mode-color-action-grayscale-hover: #00000026;\n --mode-color-action-grayscale-with-active: #FFFFFF;\n --mode-color-action-grayscale-with-active-alt: #000000;\n --mode-color-action-grayscale-with-default: #FFFFFF;\n --mode-color-action-grayscale-with-hover: #000000;\n --mode-color-action-grayscale-inverse-active: #FFFFFF;\n --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n --mode-color-action-grayscale-inverse-default: #ffffffe6;\n --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n --mode-color-action-grayscale-inverse-hover: #ffffff26;\n --mode-color-action-grayscale-inverse-with-active: #000000;\n --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n --mode-color-action-grayscale-inverse-with-default: #000000;\n --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n --mode-color-action-nav-active: #00000026;\n --mode-color-action-nav-default: #FFFFFF;\n --mode-color-action-nav-default-alt: #f8f8f8;\n --mode-color-action-nav-hover: #0000001a;\n --mode-color-action-nav-with-active: #000000;\n --mode-color-action-nav-with-default: #000000f2;\n --mode-color-action-nav-with-hover: #000000;\n --mode-color-action-nav-inverse-active: #ffffff26;\n --mode-color-action-nav-inverse-default: #000000;\n --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n --mode-color-action-nav-inverse-hover: #ffffff1a;\n --mode-color-action-nav-inverse-with-active: #FFFFFF;\n --mode-color-action-nav-inverse-with-default: #fffffff2;\n --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n --mode-color-action-main-active: #005e14;\n --mode-color-action-main-active-alt: #00811f4d;\n --mode-color-action-main-default: #00811f;\n --mode-color-action-main-default-alt: #00811fcc;\n --mode-color-action-main-default-alt2: #007219;\n --mode-color-action-main-default-alt3: #00811f08;\n --mode-color-action-main-hover: #007219;\n --mode-color-action-main-hover-alt: #00811f26;\n --mode-color-action-main-hover-alt2: #005e14;\n --mode-color-action-main-with-active: #FFFFFF;\n --mode-color-action-main-with-default: #FFFFFF;\n --mode-color-action-main-with-hover: #FFFFFF;\n --mode-color-action-main-inverse-active: #8fff98;\n --mode-color-action-main-inverse-active-alt: #00f1424d;\n --mode-color-action-main-inverse-default: #00f142;\n --mode-color-action-main-inverse-default-alt: #00f142cc;\n --mode-color-action-main-inverse-default-alt2: #46fb5e;\n --mode-color-action-main-inverse-default-alt3: #00f14208;\n --mode-color-action-main-inverse-hover: #46fb5e;\n --mode-color-action-main-inverse-hover-alt: #00f14226;\n --mode-color-action-main-inverse-hover-alt2: #8fff98;\n --mode-color-action-main-inverse-with-active: #000000;\n --mode-color-action-main-inverse-with-default: #000000;\n --mode-color-action-main-inverse-with-hover: #000000;\n --mode-color-status-ai-default: #FFFFFF;\n --mode-color-status-ai-default-alt: #000000;\n --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-callout-default-alt: #e0ffe2;\n --mode-color-status-callout-hover-alt: #b7ffbd;\n --mode-color-status-skeleton-stop1: #747474cc;\n --mode-color-status-skeleton-stop2: #7474740a;\n --mode-color-status-warning-default: #d64309;\n --mode-color-status-warning-default-alt: #fff7eb;\n --mode-color-status-warning-hover: #b33400;\n --mode-color-status-warning-hover-alt: #ffeaca;\n --mode-color-status-warning-txt: #b33400;\n --mode-color-status-warning-inverse-default: #e24300;\n --mode-color-status-warning-inverse-default-alt: #1d0300;\n --mode-color-status-warning-inverse-hover: #e5631c;\n --mode-color-status-warning-inverse-hover-alt: #360900;\n --mode-color-status-warning-inverse-txt: #e5631c;\n --mode-color-status-txt-with-default: #FFFFFF;\n --mode-color-status-txt-with-default-alt: #000000f2;\n --mode-color-status-txt-with-hover: #FFFFFF;\n --mode-color-status-txt-with-hover-alt: #000000;\n --mode-color-status-txt-loading: #747474;\n --mode-color-status-txt-inverse-with-default: #000000;\n --mode-color-status-txt-inverse-with-default-alt: #fffffff2;\n --mode-color-status-txt-inverse-with-hover: #000000;\n --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n --mode-color-status-custom-blue-default: #0071c3;\n --mode-color-status-custom-blue-default-alt: #f5f8ff;\n --mode-color-status-custom-blue-hover: #0063ad;\n --mode-color-status-custom-blue-hover-alt: #e4eeff;\n --mode-color-status-custom-teal-default: #007C7B;\n --mode-color-status-custom-teal-default-alt: #E8FCFC;\n --mode-color-status-custom-teal-hover: #006D6C;\n --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n --mode-color-status-custom-green-default: #00811F;\n --mode-color-status-custom-green-default-alt: #EEFCEF;\n --mode-color-status-custom-green-hover: #007219;\n --mode-color-status-custom-green-hover-alt: #D1F6D6;\n --mode-color-status-custom-lime-default: #627600;\n --mode-color-status-custom-lime-default-alt: #f6f9f0;\n --mode-color-status-custom-lime-hover: #576900;\n --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n --mode-color-status-custom-orange-default: #d64309;\n --mode-color-status-custom-orange-default-alt: #fff7eb;\n --mode-color-status-custom-orange-hover: #b33400;\n --mode-color-status-custom-orange-hover-alt: #ffeaca;\n --mode-color-status-custom-orange-txt: #b33400;\n --mode-color-status-custom-red-default: #db004e;\n --mode-color-status-custom-red-default-alt: #fff5f6;\n --mode-color-status-custom-red-hover: #c40044;\n --mode-color-status-custom-red-hover-alt: #ffe8ea;\n --mode-color-status-custom-pink-default: #c72699;\n --mode-color-status-custom-pink-default-alt: #fff5fa;\n --mode-color-status-custom-pink-hover: #b02086;\n --mode-color-status-custom-pink-hover-alt: #fee8f5;\n --mode-color-status-custom-purple-default: #8f4bd7;\n --mode-color-status-custom-purple-default-alt: #f9f6ff;\n --mode-color-status-custom-purple-hover: #803ec5;\n --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n --mode-color-status-custom-gray-default: #6f6f6f;\n --mode-color-status-custom-gray-default-alt: #f8f8f8;\n --mode-color-status-custom-gray-hover: #616161;\n --mode-color-status-custom-gray-hover-alt: #eeeeee;\n --mode-color-status-custom-slate-default: #527386;\n --mode-color-status-custom-slate-default-alt: #f4f9fc;\n --mode-color-status-custom-slate-hover: #486576;\n --mode-color-status-custom-slate-hover-alt: #e4eff5;\n --mode-color-status-priority-default: #8f4bd7;\n --mode-color-status-priority-default-alt: #f9f6ff;\n --mode-color-status-priority-hover: #803ec5;\n --mode-color-status-priority-hover-alt: #F3EBFE;\n --mode-color-status-priority-inverse-default: #9463d7;\n --mode-color-status-priority-inverse-default-alt: #10041f;\n --mode-color-status-priority-inverse-hover: #a375dd;\n --mode-color-status-priority-inverse-hover-alt: #220c3a;\n --mode-color-status-inactive-default: #7c7c7c;\n --mode-color-status-inactive-with-default: #0000008c;\n --mode-color-status-inactive-inverse-default: #6f6f6f;\n --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n --mode-color-status-info-default: #0071c3;\n --mode-color-status-info-default-alt: #f5f8ff;\n --mode-color-status-info-hover: #0063ad;\n --mode-color-status-info-hover-alt: #e4eeff;\n --mode-color-status-info-inverse-default: #007fd9;\n --mode-color-status-info-inverse-default-alt: #000b1c;\n --mode-color-status-info-inverse-hover: #008ef4;\n --mode-color-status-info-inverse-hover-alt: #001932;\n --mode-color-status-negative-default: #db004e;\n --mode-color-status-negative-default-alt: #fff5f6;\n --mode-color-status-negative-hover: #c40044;\n --mode-color-status-negative-hover-alt: #ffe8ea;\n --mode-color-status-negative-inverse-default: #f50059;\n --mode-color-status-negative-inverse-default-alt: #1e0005;\n --mode-color-status-negative-inverse-hover: #ff3e6a;\n --mode-color-status-negative-inverse-hover-alt: #3c000f;\n --mode-color-status-neutral-default: #6f6f6f;\n --mode-color-status-neutral-default-alt: #f8f8f8;\n --mode-color-status-neutral-hover: #616161;\n --mode-color-status-neutral-hover-alt: #eeeeee;\n --mode-color-status-neutral-inverse-default: #7c7c7c;\n --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n --mode-color-status-neutral-inverse-hover: #8b8b8b;\n --mode-color-status-neutral-inverse-hover-alt: #181818;\n --mode-color-status-positive-default: #00811F;\n --mode-color-status-positive-default-alt: #EEFCEF;\n --mode-color-status-positive-hover: #007219;\n --mode-color-status-positive-hover-alt: #D1F6D6;\n --mode-color-status-positive-inverse-default: #019127;\n --mode-color-status-positive-inverse-default-alt: #001001;\n --mode-color-status-positive-inverse-hover: #007219;\n --mode-color-status-positive-inverse-hover-alt: #001f03;\n --badge-none: var(--mode-color-none);\n --badge-border-default: var(--mode-color-generic-txt-nought);\n --badge-bg-default: var(--mode-color-status-negative-default);\n --badge-bg-alt: var(--mode-color-status-info-default);\n --badge-label-default: var(--mode-color-generic-txt-nought);\n --badge-label-alt: var(--mode-color-generic-txt-nought);\n --badge-inverse-border-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n --button-none: var(--mode-color-none);\n --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n --button-ai-label-default: var(--mode-color-action-grayscale-default);\n --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-tertiary-bg-default: var(--button-none);\n --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-tertiary-inverse-bg-default: var(--button-none);\n --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n --container-action-border-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --container-action-border-active: var(--mode-color-action-grayscale-active);\n --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n --container-action-border-default: var(--mode-color-generic-fg-firm);\n --container-action-icon-active: var(--mode-color-action-grayscale-active);\n --container-action-icon-default: var(--mode-color-action-grayscale-default);\n --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n --container-action-txt-active: var(--mode-color-action-grayscale-active);\n --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n --container-action-txt-default: var(--mode-color-generic-txt-severe);\n --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n --container-action-target-bg-default: var(--mode-color-status-info-default);\n --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n --container-standard-border-active: var(--mode-color-action-grayscale-active);\n --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n --container-standard-border-default: var(--mode-color-generic-fg-soft);\n --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n --container-standard-icon: var(--mode-color-generic-fg-firm);\n --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n --container-quote-border: var(--mode-color-action-main-default);\n --container-size-bubble-max-w: 600px;\n --container-size-copilot-emptystate-illustration: 200px;\n --container-size-copilot-emptystate-txt-max-w: 600px;\n --container-size-copilot-overlay-max-h: 960px;\n --container-size-dialog-max-ws: 540px;\n --container-size-dialog-max-wm: 850px;\n --container-size-dialog-max-wl: 1080px;\n --container-size-dialog-min-w: 288px;\n --container-size-empty-state-primary-s: 200px;\n --container-size-empty-state-primary-m: 240px;\n --container-size-empty-state-primary-l: 320px;\n --container-size-fluid-items2xs: 80px;\n --container-size-fluid-items-xs: 128px;\n --container-size-fluid-items-s: 160px;\n --container-size-fluid-items-m: 200px;\n --container-size-fluid-items-l: 240px;\n --container-size-fluid-items-xl: 288px;\n --container-size-fluid-items2xl: 320px;\n --container-size-fluid-items3xl: 560px;\n --container-size-fluid-items4xl: 760px;\n --container-size-sidebar-max-ws: 760px;\n --container-size-sidebar-max-wm: 1000px;\n --container-size-sidebar-min-w: 288px;\n --focus-bg: var(--mode-color-action-focus-with-default-alt);\n --focus-borderalt: var(--mode-color-action-focus-default);\n --focus-border: var(--mode-color-action-focus-with-default);\n --focus-label: var(--mode-color-action-focus-txt);\n --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n --dataviz-generic-label-alt: var(--mode-color-generic-txt-nought);\n --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-required: var(--mode-color-action-danger-default);\n --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n --input-typical-border-alt: var(--mode-color-action-inactive-default);\n --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n --input-switch-border-active: transparent;\n --input-switch-border-active-disabled: transparent;\n --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-validation-border-error: var(--mode-color-status-negative-default);\n --input-validation-bar-error: var(--mode-color-status-negative-default);\n --input-validation-bar-warn: var(--mode-color-status-warning-default);\n --input-validation-label-error: var(--mode-color-status-negative-default);\n --input-validation-label-success: var(--mode-color-status-positive-default);\n --input-validation-label-warn: var(--mode-color-status-warning-txt);\n --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n --input-size-generic-min-w: 288px;\n --logo-sage-bg-default: var(--mode-color-brand-default);\n --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n --message-none: var(--mode-color-none);\n --message-contextual-bg: var(--mode-color-generic-bg-nought);\n --message-contextual-icon: var(--mode-color-generic-bg-nought);\n --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n --message-contextual-error-icon: var(--mode-color-status-negative-default);\n --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n --message-contextual-info-border-default: var(--mode-color-status-info-default);\n --message-contextual-info-icon: var(--mode-color-status-info-default);\n --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n --message-contextual-success-icon: var(--mode-color-status-positive-default);\n --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n --message-global-info-icon: var(--mode-color-status-info-default);\n --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n --message-global-warning-icon: var(--mode-color-status-warning-default);\n --nav-bg-default: var(--mode-color-generic-bg-nought);\n --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n --nav-leftnav-item-bg-default: var(--mode-color-none);\n --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n --nav-modal-item-bg-default: var(--mode-color-none);\n --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n --nav-topnav-item-bg-default: var(--mode-color-none);\n --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n --page-bg-default: var(--mode-color-generic-surface-nought);\n --page-bg-alt: var(--mode-color-generic-surface-faint);\n --page-txt-alt: var(--mode-color-generic-txt-moderate);\n --page-txt-default: var(--mode-color-generic-txt-severe);\n --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n --popover-bg-active: var(--mode-color-action-grayscale-active);\n --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n --popover-bg-default: var(--mode-color-generic-bg-nought);\n --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --popover-label-active: var(--mode-color-action-grayscale-with-active);\n --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n --popover-label-disabled: var(--mode-color-action-inactive-txt);\n --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n --profile-size-outside-xs: var(--global-size-xs);\n --profile-size-outside-s: var(--global-size-s);\n --profile-size-outside-m: var(--global-size-m);\n --profile-size-outside-ml: 56px;\n --profile-size-outside-l: var(--global-size-4-xl);\n --profile-size-outside-xl: 104px;\n --profile-size-outside-xxl: 128px;\n --profile-size-inside-xs: var(--global-size-3-xs);\n --profile-size-inside-s: var(--global-size-2-xs);\n --profile-size-inside-m: var(--global-size-xs);\n --profile-size-inside-ml: var(--global-size-s);\n --profile-size-inside-l: var(--global-size-l);\n --profile-size-inside-xl: var(--global-size-2-xl);\n --profile-size-inside-xxl: var(--global-size-4-xl);\n --profile-bg-alt: var(--mode-color-generic-txt-severe);\n --profile-bg-def: var(--mode-color-generic-bg-nought);\n --profile-border-default: var(--mode-color-generic-fg-moderate);\n --profile-label-default: var(--mode-color-generic-txt-severe);\n --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n --profile-font-def-s: var(--global-font-static-comp-regular-m);\n --profile-font-def-m: var(--global-font-static-comp-regular-m);\n --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n --profile-font-def-l: var(--global-font-static-comp-regular-l);\n --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n --profile-font-heading-m: var(--global-font-static-subheading-l);\n --profile-font-heading-ml: var(--global-font-static-subheading-l);\n --profile-font-heading-l: var(--global-font-static-subheading-l);\n --profile-font-heading-xl: var(--global-font-static-heading-m);\n --profile-font-heading-xxl: var(--global-font-static-heading-l);\n --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n --progress-none: var(--mode-color-none);\n --progress-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-border-default: var(--mode-color-generic-fg-firm);\n --progress-fg-alt: var(--mode-color-status-positive-default);\n --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n --progress-fg-caution: var(--mode-color-status-warning-default);\n --progress-fg-default: var(--mode-color-action-grayscale-active);\n --progress-fg-error: var(--mode-color-status-negative-default);\n --progress-fg-info: var(--mode-color-status-info-default);\n --progress-label-alt: var(--mode-color-generic-txt-moderate);\n --progress-label-default: var(--mode-color-generic-txt-severe);\n --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n --progress-loader-fg-default: var(--mode-color-generic-fg-extreme);\n --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n --progress-loader-fg-error: var(--mode-color-status-negative-default);\n --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n --pill-generic-none: var(--mode-color-none);\n --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n --pill-error-bg-default: var(--mode-color-status-negative-default);\n --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n --pill-error-border-default: var(--mode-color-status-negative-default);\n --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n --pill-priority-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-border-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n --pill-info-bg-default: var(--mode-color-status-info-default);\n --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-info-bg-hover: var(--mode-color-status-info-hover);\n --pill-info-border-default: var(--mode-color-status-info-default);\n --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n --pill-readonly-label: var(--mode-color-generic-txt-soft);\n --pill-positive-bg-default: var(--mode-color-status-positive-default);\n --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n --pill-positive-border-default: var(--mode-color-status-positive-default);\n --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n --pill-warn-bg-default: var(--mode-color-status-warning-default);\n --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n --pill-warn-border-default: var(--mode-color-status-warning-default);\n --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n --tab-bg-default: var(--mode-color-none);\n --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n --tab-border-active: var(--mode-color-action-grayscale-active);\n --tab-border-default: var(--mode-color-generic-fg-moderate);\n --tab-border-hover: var(--mode-color-generic-fg-firm);\n --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-label-active: var(--mode-color-action-grayscale-active);\n --tab-icon-active: var(--mode-color-action-grayscale-active);\n --tab-label-default: var(--mode-color-action-grayscale-default);\n --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n --tab-validation-border-warning: var(--mode-color-status-warning-default);\n --tab-validation-border-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n --tab-validation-label-error: var(--mode-color-status-negative-default);\n --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n --table-header-subtle-bg-default: var(--mode-color-none);\n --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);\n --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);\n --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n --table-row-bg-default: var(--mode-color-generic-bg-nought);\n --table-row-bg-alt: var(--mode-color-generic-bg-faint);\n --table-row-bg-alt2: var(--mode-color-generic-bg-soft);\n --table-row-bg-alt3: var(--mode-color-generic-bg-faint);\n --table-row-bg-selected: var(--mode-color-generic-bg-moderate);\n --table-row-border-default: var(--mode-color-generic-fg-soft);\n --table-row-label-default: var(--mode-color-generic-txt-severe);\n --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n --table-footer-bg-default: var(--mode-color-generic-bg-moderate);\n --table-footer-border-default: var(--mode-color-generic-fg-moderate);\n --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";export{e as default};
1	+ var e="\n --global-borderwidth-none: 0;\n --global-borderwidth-xs: 1px;\n --global-borderwidth-s: 2px;\n --global-borderwidth-m: 3px;\n --global-borderwidth-l: 4px;\n --global-borderwidth-xl: 6px;\n --global-borderwidth-xxl: 8px;\n --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;\n --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;\n --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-icon-s: 20px sage-icons;\n --global-font-fluid-comp-icon-m: 20px sage-icons;\n --global-font-fluid-comp-icon-l: 20px sage-icons;\n --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;\n --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;\n --global-font-static-heading-s: 500 21px/1.25 Sage UI;\n --global-font-static-heading-m: 700 24px/1.25 Sage UI;\n --global-font-static-heading-l: 700 30px/1.25 Sage UI;\n --global-font-static-subheading-m: 500 16px/1.25 Sage UI;\n --global-font-static-subheading-l: 500 18px/1.25 Sage UI;\n --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;\n --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;\n --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;\n --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;\n --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-icon-s: 20px sage-icons;\n --global-font-static-comp-icon-m: 20px sage-icons;\n --global-font-static-comp-icon-l: 20px sage-icons;\n --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;\n --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;\n --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;\n --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;\n --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;\n --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;\n --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;\n --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;\n --global-modifier-button-active: 0.30;\n --global-modifier-button-active-alt: 0.15;\n --global-modifier-button-hover: 0.15;\n --global-modifier-button-hover-alt: 0.10;\n --global-modifier-input-disabled-fg: 0.3;\n --global-modifier-input-disabled-bg: 0.05;\n --global-radius-none: 0;\n --global-radius-container3xs: 1px;\n --global-radius-container2xs: 2px;\n --global-radius-container-xs: 4px;\n --global-radius-container-s: 6px;\n --global-radius-container-m: 8px;\n --global-radius-container-l: 16px;\n --global-radius-container-xl: 24px;\n --global-radius-container2xl: 32px;\n --global-radius-container3xl: 40px;\n --global-radius-container4xl: 80px;\n --global-radius-container-circle: 999px;\n --global-radius-action2xs: 1px;\n --global-radius-action-xs: 2px;\n --global-radius-action-s: 4px;\n --global-radius-action-m: 8px;\n --global-radius-action-l: 16px;\n --global-radius-action-xl: 20px;\n --global-radius-action2xl: 24px;\n --global-radius-action-circle: 999px;\n --global-depth-none: dropShadow 0 0 0 0 rgba(0,0,0,0);\n --global-depth-lvl1: dropShadow 0 1px 2px 0 #0000001A, dropShadow 2px 2px 10px 0 #00000033;\n --global-depth-lvl2: dropShadow 0 2px 3px 0 #0000001A, dropShadow 6px 6px 30px 0 #00000026;\n --global-depth-lvl3: dropShadow 0 3px 4px 0 #0000001A, dropShadow 10px 10px 60px 0 #0000001A;\n --global-depth-sticky-b: dropShadow 0 -1px 2px 0 #0000001A, dropShadow 2px -2px 10px 0 #00000033;\n --global-depth-sticky-l: dropShadow -2px 0 2px 0 #0000001A, dropShadow -5px 0 5px 0 #0000001A;\n --global-depth-sticky-r: dropShadow 2px 0 2px 0 #0000001A, dropShadow 5px 0 5px 0 #0000001A;\n --global-size-none: 0px;\n --global-size6xs: 2px;\n --global-size5xs: 4px;\n --global-size4xs: 8px;\n --global-size3xs: 16px;\n --global-size2xs: 20px;\n --global-size-xs: 24px;\n --global-size-s: 32px;\n --global-size-m: 40px;\n --global-size-l: 48px;\n --global-size-xl: 56px;\n --global-size2xl: 64px;\n --global-size3xl: 72px;\n --global-size4xl: 80px;\n --global-space-none: 0px;\n --global-space-layout3xs: 8px;\n --global-space-layout2xs: 16px;\n --global-space-layout-xs: 24px;\n --global-space-layout-s: 32px;\n --global-space-layout-m: 40px;\n --global-space-layout-l: 48px;\n --global-space-layout-xl: 56px;\n --global-space-layout2xl: 64px;\n --global-space-layout3xl: 72px;\n --global-space-layout4xl: 80px;\n --global-space-comp2xs: 2px;\n --global-space-comp-xs: 4px;\n --global-space-comp-s: 8px;\n --global-space-comp-m: 12px;\n --global-space-comp-l: 16px;\n --global-space-comp-xl: 24px;\n --global-space-comp2xl: 32px;\n --mode-color-none: #fff0;\n --mode-color-ai-stop1: #13a038;\n --mode-color-ai-stop2: #149197;\n --mode-color-ai-stop3: #a87cfb;\n --mode-color-ai-alt-stop1: #00d639;\n --mode-color-ai-alt-stop2: #00d6de;\n --mode-color-ai-alt-stop3: #9d60ff;\n --mode-color-brand-default: #000000;\n --mode-color-brand-default-alt: #000000;\n --mode-color-brand-with-default-alt: #FFFFFF;\n --mode-color-brand-inverse-default: #00d639;\n --mode-color-brand-inverse-default-alt: #FFFFFF;\n --mode-color-brand-inverse-with-default-alt: #000000;\n --mode-color-brand-copilot-default: #000000;\n --mode-color-brand-copilot-monochrome: #000000;\n --mode-color-brand-copilot-with-default: #00d639;\n --mode-color-brand-copilot-inverse-default: #FFFFFF;\n --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;\n --mode-color-brand-copilot-inverse-with-default: #00d639;\n --mode-color-colorcode-blue-deep: #0071c3;\n --mode-color-colorcode-blue-muted: #e4eeff;\n --mode-color-colorcode-teal-deep: #007C7B;\n --mode-color-colorcode-teal-muted: #C8F5F5;\n --mode-color-colorcode-green-deep: #00811F;\n --mode-color-colorcode-green-muted: #D1F6D6;\n --mode-color-colorcode-lime-deep: #627600;\n --mode-color-colorcode-lime-muted: #e8f1d4;\n --mode-color-colorcode-orange-deep: #d64309;\n --mode-color-colorcode-orange-muted: #ffeaca;\n --mode-color-colorcode-red-deep: #db004e;\n --mode-color-colorcode-red-muted: #ffe8ea;\n --mode-color-colorcode-pink-deep: #c72699;\n --mode-color-colorcode-pink-muted: #fee8f5;\n --mode-color-colorcode-purple-deep: #8f4bd7;\n --mode-color-colorcode-purple-muted: #F3EBFE;\n --mode-color-colorcode-slate-deep: #527386;\n --mode-color-colorcode-slate-muted: #e4eff5;\n --mode-color-colorcode-gray-deep: #6f6f6f;\n --mode-color-colorcode-gray-muted: #eeeeee;\n --mode-color-generic-bg-nought: #FFFFFF;\n --mode-color-generic-bg-faint: #f4f5f6;\n --mode-color-generic-bg-delicate: #e8eaec;\n --mode-color-generic-bg-soft: #dde0e3;\n --mode-color-generic-bg-moderate: #d1d6da;\n --mode-color-generic-bg-firm: #c6ccd1;\n --mode-color-generic-bg-harsh: #bac1c7;\n --mode-color-generic-bg-severe: #afb7be;\n --mode-color-generic-bg-extreme: #000000;\n --mode-color-generic-bg-inverse-nought: #000000;\n --mode-color-generic-bg-inverse-faint: #ffffff0d;\n --mode-color-generic-bg-inverse-delicate: #ffffff1a;\n --mode-color-generic-bg-inverse-soft: #ffffff26;\n --mode-color-generic-bg-inverse-moderate: #fff3;\n --mode-color-generic-bg-inverse-firm: #ffffff40;\n --mode-color-generic-bg-inverse-harsh: #ffffff4d;\n --mode-color-generic-bg-inverse-severe: #ffffff59;\n --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-extreme: #000000;\n --mode-color-generic-txt-severe: #000000f2;\n --mode-color-generic-txt-moderate: #000000a6;\n --mode-color-generic-txt-soft: #0000008c;\n --mode-color-generic-txt-delicate: #0000006b;\n --mode-color-generic-txt-faint: #0000004d;\n --mode-color-generic-txt-nought: #FFFFFF;\n --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n --mode-color-generic-txt-inverse-severe: #fffffff2;\n --mode-color-generic-txt-inverse-moderate: #ffffffab;\n --mode-color-generic-txt-inverse-soft: #ffffff8c;\n --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n --mode-color-generic-txt-inverse-faint: #ffffff4d;\n --mode-color-generic-txt-inverse-faint-copy: #ffffff4d;\n --mode-color-generic-txt-inverse-nought: #000000;\n --mode-color-generic-fg-nought: #FFFFFF;\n --mode-color-generic-fg-delicate: #e8eaec;\n --mode-color-generic-fg-soft: #a3adb5;\n --mode-color-generic-fg-moderate: #8c98a2;\n --mode-color-generic-fg-firm: #75838f;\n --mode-color-generic-fg-extreme: #000000;\n --mode-color-generic-fg-inverse-nought: #000000;\n --mode-color-generic-fg-inverse-delicate: #181818;\n --mode-color-generic-fg-inverse-soft: #505050;\n --mode-color-generic-fg-inverse-moderate: #616161;\n --mode-color-generic-fg-inverse-firm: #6f6f6f;\n --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n --mode-color-generic-surface-nought: #FFFFFF;\n --mode-color-generic-surface-faint: #f4f5f6;\n --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);\n --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);\n --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-action-ai-active-stop1: #13a03826;\n --mode-color-action-ai-active-stop2: #14919726;\n --mode-color-action-ai-active-stop3: #a87cfb26;\n --mode-color-action-ai-hover-stop1: #13a03814;\n --mode-color-action-ai-hover-stop2: #14919714;\n --mode-color-action-ai-hover-stop3: #a87cfb14;\n --mode-color-action-danger-active: #a30037;\n --mode-color-action-danger-default: #db004e;\n --mode-color-action-danger-default-alt: #c40044;\n --mode-color-action-danger-hover: #c40044;\n --mode-color-action-danger-hover-alt: #db004e26;\n --mode-color-action-danger-hover-alt2: #a30037;\n --mode-color-action-danger-with-active: #FFFFFF;\n --mode-color-action-danger-with-default: #FFFFFF;\n --mode-color-action-danger-inverse-active: #ff728d;\n --mode-color-action-danger-inverse-default: #f50059;\n --mode-color-action-danger-inverse-default-alt: #ff3e6a;\n --mode-color-action-danger-inverse-hover: #ff3e6a;\n --mode-color-action-danger-inverse-hover-alt: #f5005926;\n --mode-color-action-danger-inverse-hover-alt2: #ff728d;\n --mode-color-action-danger-inverse-with-active: #000000;\n --mode-color-action-danger-inverse-with-default: #000000;\n --mode-color-action-data-entry-default: #FFFFFF;\n --mode-color-action-data-entry-with-active: #000000;\n --mode-color-action-data-entry-with-active-alt: #FFFFFF;\n --mode-color-action-data-entry-with-hover: #000000;\n --mode-color-action-data-entry-hover-alt: #f4f5f6;\n --mode-color-action-data-entry-with-default: #75838f;\n --mode-color-action-data-entry-default-alt: #e8eaec;\n --mode-color-action-data-entry-txt: #000000f2;\n --mode-color-action-data-entry-txt-alt: #0000008c;\n --mode-color-action-data-entry-inverse-default: #000000;\n --mode-color-action-data-entry-inverse-with-default: #a3adb5;\n --mode-color-action-data-entry-inverse-txt: #fffffff2;\n --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;\n --mode-color-action-focus-default: #000000;\n --mode-color-action-focus-txt: #000000;\n --mode-color-action-focus-with-default: #FFB500;\n --mode-color-action-focus-with-default-alt: #ffd274;\n --mode-color-action-focus-inverse-default: #FFB500;\n --mode-color-action-focus-inverse-txt: #FFFFFF;\n --mode-color-action-focus-inverse-with-default: #000000;\n --mode-color-action-focus-inverse-with-default-alt: #885e00;\n --mode-color-action-inactive-default: #0000004d;\n --mode-color-action-inactive-mask: #0006;\n --mode-color-action-inactive-default-alt: #eeeeee;\n --mode-color-action-inactive-txt: #0000006b;\n --mode-color-action-inactive-txt-alt: #FFFFFF;\n --mode-color-action-inactive-icon: #0000006b;\n --mode-color-action-inactive-icon-alt: #0000008c;\n --mode-color-action-inactive-inverse-default: #ffffff4d;\n --mode-color-action-inactive-inverse-txt: #ffffff6b;\n --mode-color-action-inactive-inverse-txt-alt: #000000;\n --mode-color-action-grayscale-active: #000000;\n --mode-color-action-grayscale-active-alt: #00000026;\n --mode-color-action-grayscale-default: #000000e6;\n --mode-color-action-grayscale-default-alt: #000000ab;\n --mode-color-action-grayscale-hover-alt: #0000001a;\n --mode-color-action-grayscale-hover: #00000026;\n --mode-color-action-grayscale-with-active: #FFFFFF;\n --mode-color-action-grayscale-with-active-alt: #000000;\n --mode-color-action-grayscale-with-default: #FFFFFF;\n --mode-color-action-grayscale-with-hover: #000000;\n --mode-color-action-grayscale-inverse-active: #FFFFFF;\n --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n --mode-color-action-grayscale-inverse-default: #ffffffe6;\n --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n --mode-color-action-grayscale-inverse-hover: #ffffff26;\n --mode-color-action-grayscale-inverse-with-active: #000000;\n --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n --mode-color-action-grayscale-inverse-with-default: #000000;\n --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n --mode-color-action-nav-active: #253b4e26;\n --mode-color-action-nav-default: #FFFFFF;\n --mode-color-action-nav-default-alt: #f4f5f6;\n --mode-color-action-nav-hover: #253b4e1a;\n --mode-color-action-nav-with-active: #000000;\n --mode-color-action-nav-with-default: #000000f2;\n --mode-color-action-nav-with-hover: #000000;\n --mode-color-action-nav-inverse-active: #ffffff26;\n --mode-color-action-nav-inverse-default: #000000;\n --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n --mode-color-action-nav-inverse-hover: #ffffff1a;\n --mode-color-action-nav-inverse-with-active: #FFFFFF;\n --mode-color-action-nav-inverse-with-default: #fffffff2;\n --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n --mode-color-action-main-active: #005e14;\n --mode-color-action-main-active-alt: #00811f4d;\n --mode-color-action-main-default: #00811f;\n --mode-color-action-main-default-alt: #00811fcc;\n --mode-color-action-main-default-alt2: #007219;\n --mode-color-action-main-default-alt3: #00811f08;\n --mode-color-action-main-hover: #007219;\n --mode-color-action-main-hover-alt: #00811f26;\n --mode-color-action-main-hover-alt2: #005e14;\n --mode-color-action-main-with-active: #FFFFFF;\n --mode-color-action-main-with-default: #FFFFFF;\n --mode-color-action-main-with-hover: #FFFFFF;\n --mode-color-action-main-inverse-active: #8fff98;\n --mode-color-action-main-inverse-active-alt: #00f1424d;\n --mode-color-action-main-inverse-default: #00f142;\n --mode-color-action-main-inverse-default-alt: #00f142cc;\n --mode-color-action-main-inverse-default-alt2: #46fb5e;\n --mode-color-action-main-inverse-default-alt3: #00f14208;\n --mode-color-action-main-inverse-hover: #46fb5e;\n --mode-color-action-main-inverse-hover-alt: #00f14226;\n --mode-color-action-main-inverse-hover-alt2: #8fff98;\n --mode-color-action-main-inverse-with-active: #000000;\n --mode-color-action-main-inverse-with-default: #000000;\n --mode-color-action-main-inverse-with-hover: #000000;\n --mode-color-status-ai-default: #FFFFFF;\n --mode-color-status-ai-default-alt: #000000;\n --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);\n --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);\n --mode-color-status-callout-default-alt: #e0ffe2;\n --mode-color-status-callout-hover-alt: #b7ffbd;\n --mode-color-status-skeleton-stop1: #75838f;\n --mode-color-status-skeleton-stop2: #d1d6da;\n --mode-color-status-warning-default: #d64309;\n --mode-color-status-warning-default-alt: #fff7eb;\n --mode-color-status-warning-hover: #b33400;\n --mode-color-status-warning-hover-alt: #ffeaca;\n --mode-color-status-warning-txt: #b33400;\n --mode-color-status-warning-inverse-default: #e24300;\n --mode-color-status-warning-inverse-default-alt: #1d0300;\n --mode-color-status-warning-inverse-hover: #e5631c;\n --mode-color-status-warning-inverse-hover-alt: #360900;\n --mode-color-status-warning-inverse-txt: #e5631c;\n --mode-color-status-txt-with-default: #FFFFFF;\n --mode-color-status-txt-with-default-alt: #000000f2;\n --mode-color-status-txt-with-hover: #FFFFFF;\n --mode-color-status-txt-with-hover-alt: #000000;\n --mode-color-status-txt-loading: #747474;\n --mode-color-status-txt-inverse-with-default: #000000;\n --mode-color-status-txt-inverse-with-default-alt: #fffffff2;\n --mode-color-status-txt-inverse-with-hover: #000000;\n --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n --mode-color-status-custom-blue-default: #0071c3;\n --mode-color-status-custom-blue-default-alt: #f5f8ff;\n --mode-color-status-custom-blue-hover: #0063ad;\n --mode-color-status-custom-blue-hover-alt: #e4eeff;\n --mode-color-status-custom-teal-default: #007C7B;\n --mode-color-status-custom-teal-default-alt: #E8FCFC;\n --mode-color-status-custom-teal-hover: #006D6C;\n --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n --mode-color-status-custom-green-default: #00811F;\n --mode-color-status-custom-green-default-alt: #EEFCEF;\n --mode-color-status-custom-green-hover: #007219;\n --mode-color-status-custom-green-hover-alt: #D1F6D6;\n --mode-color-status-custom-lime-default: #627600;\n --mode-color-status-custom-lime-default-alt: #f6f9f0;\n --mode-color-status-custom-lime-hover: #576900;\n --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n --mode-color-status-custom-orange-default: #d64309;\n --mode-color-status-custom-orange-default-alt: #fff7eb;\n --mode-color-status-custom-orange-hover: #b33400;\n --mode-color-status-custom-orange-hover-alt: #ffeaca;\n --mode-color-status-custom-orange-txt: #b33400;\n --mode-color-status-custom-red-default: #db004e;\n --mode-color-status-custom-red-default-alt: #fff5f6;\n --mode-color-status-custom-red-hover: #c40044;\n --mode-color-status-custom-red-hover-alt: #ffe8ea;\n --mode-color-status-custom-pink-default: #c72699;\n --mode-color-status-custom-pink-default-alt: #fff5fa;\n --mode-color-status-custom-pink-hover: #b02086;\n --mode-color-status-custom-pink-hover-alt: #fee8f5;\n --mode-color-status-custom-purple-default: #8f4bd7;\n --mode-color-status-custom-purple-default-alt: #f9f6ff;\n --mode-color-status-custom-purple-hover: #803ec5;\n --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n --mode-color-status-custom-gray-default: #6f6f6f;\n --mode-color-status-custom-gray-default-alt: #f8f8f8;\n --mode-color-status-custom-gray-hover: #616161;\n --mode-color-status-custom-gray-hover-alt: #eeeeee;\n --mode-color-status-custom-slate-default: #536574;\n --mode-color-status-custom-slate-default-alt: #f4f5f6;\n --mode-color-status-custom-slate-hover: #475a6a;\n --mode-color-status-custom-slate-hover-alt: #e8eaec;\n --mode-color-status-priority-default: #8f4bd7;\n --mode-color-status-priority-default-alt: #f9f6ff;\n --mode-color-status-priority-hover: #803ec5;\n --mode-color-status-priority-hover-alt: #F3EBFE;\n --mode-color-status-priority-inverse-default: #9463d7;\n --mode-color-status-priority-inverse-default-alt: #10041f;\n --mode-color-status-priority-inverse-hover: #a375dd;\n --mode-color-status-priority-inverse-hover-alt: #220c3a;\n --mode-color-status-inactive-default: #75838f;\n --mode-color-status-inactive-with-default: #0000008c;\n --mode-color-status-inactive-inverse-default: #6f6f6f;\n --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n --mode-color-status-info-default: #0071c3;\n --mode-color-status-info-default-alt: #f5f8ff;\n --mode-color-status-info-hover: #0063ad;\n --mode-color-status-info-hover-alt: #e4eeff;\n --mode-color-status-info-inverse-default: #007fd9;\n --mode-color-status-info-inverse-default-alt: #000b1c;\n --mode-color-status-info-inverse-hover: #008ef4;\n --mode-color-status-info-inverse-hover-alt: #001932;\n --mode-color-status-negative-default: #db004e;\n --mode-color-status-negative-default-alt: #fff5f6;\n --mode-color-status-negative-hover: #c40044;\n --mode-color-status-negative-hover-alt: #ffe8ea;\n --mode-color-status-negative-inverse-default: #f50059;\n --mode-color-status-negative-inverse-default-alt: #1e0005;\n --mode-color-status-negative-inverse-hover: #ff3e6a;\n --mode-color-status-negative-inverse-hover-alt: #3c000f;\n --mode-color-status-neutral-default: #6f6f6f;\n --mode-color-status-neutral-default-alt: #f8f8f8;\n --mode-color-status-neutral-hover: #616161;\n --mode-color-status-neutral-hover-alt: #eeeeee;\n --mode-color-status-neutral-inverse-default: #7c7c7c;\n --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n --mode-color-status-neutral-inverse-hover: #8b8b8b;\n --mode-color-status-neutral-inverse-hover-alt: #181818;\n --mode-color-status-positive-default: #00811F;\n --mode-color-status-positive-default-alt: #EEFCEF;\n --mode-color-status-positive-hover: #007219;\n --mode-color-status-positive-hover-alt: #D1F6D6;\n --mode-color-status-positive-inverse-default: #019127;\n --mode-color-status-positive-inverse-default-alt: #001001;\n --mode-color-status-positive-inverse-hover: #007219;\n --mode-color-status-positive-inverse-hover-alt: #001f03;\n --badge-none: var(--mode-color-none);\n --badge-bg-default: var(--mode-color-status-negative-default);\n --badge-border-default: var(--mode-color-generic-bg-nought);\n --badge-bg-alt: var(--mode-color-status-info-default);\n --badge-label-default: var(--mode-color-generic-txt-inverse-extreme);\n --badge-label-alt: var(--mode-color-generic-txt-inverse-extreme);\n --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --badge-inverse-border-default: var(--mode-color-generic-bg-inverse-nought);\n --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n --button-none: var(--mode-color-none);\n --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n --button-ai-label-default: var(--mode-color-action-grayscale-default);\n --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n --button-typical-tertiary-bg-default: var(--button-none);\n --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n --button-typical-tertiary-inverse-bg-default: var(--button-none);\n --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n --container-action-border-activated: var(--mode-color-status-positive-default);\n --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-default: var(--mode-color-generic-bg-nought);\n --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --container-action-border-active: var(--mode-color-action-grayscale-active);\n --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n --container-action-border-default: var(--mode-color-generic-fg-firm);\n --container-action-icon-active: var(--mode-color-action-grayscale-active);\n --container-action-icon-default: var(--mode-color-action-grayscale-default);\n --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n --container-action-txt-active: var(--mode-color-action-grayscale-active);\n --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n --container-action-txt-default: var(--mode-color-generic-txt-severe);\n --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n --container-action-target-bg-default: var(--mode-color-status-info-default);\n --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n --container-standard-border-active: var(--mode-color-action-grayscale-active);\n --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n --container-standard-border-default: var(--mode-color-generic-fg-soft);\n --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n --container-standard-icon: var(--mode-color-generic-fg-firm);\n --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n --container-standard-inverse-bg-alt: var(--mode-color-generic-bg-inverse-delicate);\n --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n --container-quote-border: var(--mode-color-action-main-default);\n --container-size-bubble-max-w: 600px;\n --container-size-copilot-emptystate-illustration: 200px;\n --container-size-copilot-emptystate-txt-max-w: 600px;\n --container-size-copilot-overlay-max-h: 960px;\n --container-size-dialog-max-ws: 540px;\n --container-size-dialog-max-wm: 850px;\n --container-size-dialog-max-wl: 1080px;\n --container-size-dialog-min-w: 288px;\n --container-size-empty-state-primary-s: 200px;\n --container-size-empty-state-primary-m: 240px;\n --container-size-empty-state-primary-l: 320px;\n --container-size-fluid-items2xs: 80px;\n --container-size-fluid-items-xs: 128px;\n --container-size-fluid-items-s: 160px;\n --container-size-fluid-items-m: 200px;\n --container-size-fluid-items-l: 240px;\n --container-size-fluid-items-xl: 288px;\n --container-size-fluid-items2xl: 320px;\n --container-size-fluid-items3xl: 560px;\n --container-size-fluid-items4xl: 760px;\n --container-size-sidebar-max-ws: 760px;\n --container-size-sidebar-max-wm: 1000px;\n --container-size-sidebar-min-w: 288px;\n --focus-bg: var(--mode-color-action-focus-with-default-alt);\n --focus-borderalt: var(--mode-color-action-focus-default);\n --focus-border: var(--mode-color-action-focus-with-default);\n --focus-label: var(--mode-color-action-focus-txt);\n --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n --dataviz-generic-label-alt: var(--mode-color-generic-txt-inverse-extreme);\n --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-required: var(--mode-color-action-danger-default);\n --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n --input-typical-border-alt: var(--mode-color-action-inactive-default);\n --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n --input-switch-border-active: transparent;\n --input-switch-border-active-disabled: transparent;\n --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n --input-validation-border-error: var(--mode-color-status-negative-default);\n --input-validation-bar-error: var(--mode-color-status-negative-default);\n --input-validation-bar-warn: var(--mode-color-status-warning-default);\n --input-validation-label-error: var(--mode-color-status-negative-default);\n --input-validation-label-success: var(--mode-color-status-positive-default);\n --input-validation-label-warn: var(--mode-color-status-warning-txt);\n --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n --input-size-generic-min-w: 288px;\n --logo-sage-bg-default: var(--mode-color-brand-default);\n --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n --message-none: var(--mode-color-none);\n --message-contextual-bg: var(--mode-color-generic-bg-nought);\n --message-contextual-icon: var(--mode-color-generic-bg-nought);\n --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n --message-contextual-error-icon: var(--mode-color-status-negative-default);\n --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n --message-contextual-info-border-default: var(--mode-color-status-info-default);\n --message-contextual-info-icon: var(--mode-color-status-info-default);\n --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n --message-contextual-success-icon: var(--mode-color-status-positive-default);\n --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n --message-global-info-icon: var(--mode-color-status-info-default);\n --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n --message-global-warning-icon: var(--mode-color-status-warning-default);\n --nav-bg-default: var(--mode-color-generic-bg-nought);\n --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n --nav-leftnav-item-bg-default: var(--mode-color-none);\n --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n --nav-modal-item-bg-default: var(--mode-color-none);\n --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n --nav-topnav-item-bg-default: var(--mode-color-none);\n --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n --page-bg-default: var(--mode-color-generic-surface-nought);\n --page-bg-alt: var(--mode-color-generic-surface-faint);\n --page-txt-alt: var(--mode-color-generic-txt-moderate);\n --page-txt-default: var(--mode-color-generic-txt-severe);\n --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n --popover-bg-active: var(--mode-color-action-grayscale-active);\n --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n --popover-bg-default: var(--mode-color-generic-bg-nought);\n --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --popover-label-active: var(--mode-color-action-grayscale-with-active);\n --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n --popover-label-disabled: var(--mode-color-action-inactive-txt);\n --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n --profile-size-outside-xs: var(--global-size-xs);\n --profile-size-outside-s: var(--global-size-s);\n --profile-size-outside-m: var(--global-size-m);\n --profile-size-outside-ml: 56px;\n --profile-size-outside-l: var(--global-size-4-xl);\n --profile-size-outside-xl: 104px;\n --profile-size-outside-xxl: 128px;\n --profile-size-inside-xs: var(--global-size-3-xs);\n --profile-size-inside-s: var(--global-size-2-xs);\n --profile-size-inside-m: var(--global-size-xs);\n --profile-size-inside-ml: var(--global-size-s);\n --profile-size-inside-l: var(--global-size-l);\n --profile-size-inside-xl: var(--global-size-2-xl);\n --profile-size-inside-xxl: var(--global-size-4-xl);\n --profile-bg-alt: var(--mode-color-generic-txt-severe);\n --profile-bg-def: var(--mode-color-generic-bg-nought);\n --profile-border-default: var(--mode-color-generic-fg-moderate);\n --profile-label-default: var(--mode-color-generic-txt-severe);\n --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n --profile-font-def-s: var(--global-font-static-comp-regular-m);\n --profile-font-def-m: var(--global-font-static-comp-regular-m);\n --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n --profile-font-def-l: var(--global-font-static-comp-regular-l);\n --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n --profile-font-heading-m: var(--global-font-static-subheading-l);\n --profile-font-heading-ml: var(--global-font-static-subheading-l);\n --profile-font-heading-l: var(--global-font-static-subheading-l);\n --profile-font-heading-xl: var(--global-font-static-heading-m);\n --profile-font-heading-xxl: var(--global-font-static-heading-l);\n --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n --progress-none: var(--mode-color-none);\n --progress-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-border-default: var(--mode-color-generic-fg-firm);\n --progress-fg-alt: var(--mode-color-status-positive-default);\n --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n --progress-fg-caution: var(--mode-color-status-warning-default);\n --progress-fg-default: var(--mode-color-action-grayscale-active);\n --progress-fg-error: var(--mode-color-status-negative-default);\n --progress-fg-info: var(--mode-color-status-info-default);\n --progress-label-alt: var(--mode-color-generic-txt-moderate);\n --progress-label-default: var(--mode-color-generic-txt-severe);\n --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n --progress-loader-fg-default: var(--mode-color-generic-fg-inverse-nought);\n --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n --progress-loader-fg-error: var(--mode-color-status-negative-default);\n --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n --pill-generic-none: var(--mode-color-none);\n --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n --pill-error-bg-default: var(--mode-color-status-negative-default);\n --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n --pill-error-border-default: var(--mode-color-status-negative-default);\n --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n --pill-priority-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-border-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n --pill-info-bg-default: var(--mode-color-status-info-default);\n --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-info-bg-hover: var(--mode-color-status-info-hover);\n --pill-info-border-default: var(--mode-color-status-info-default);\n --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n --pill-readonly-label: var(--mode-color-generic-txt-soft);\n --pill-positive-bg-default: var(--mode-color-status-positive-default);\n --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n --pill-positive-border-default: var(--mode-color-status-positive-default);\n --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n --pill-warn-bg-default: var(--mode-color-status-warning-default);\n --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n --pill-warn-border-default: var(--mode-color-status-warning-default);\n --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n --pill-blue-bg-default: var(--mode-color-status-info-default);\n --pill-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n --pill-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n --pill-blue-bg-hover: var(--mode-color-status-info-hover);\n --pill-blue-border-default: var(--mode-color-status-info-default);\n --pill-blue-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n --pill-blue-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n --pill-blue-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n --pill-blue-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n --pill-blue-inverse-border-default: var(--mode-color-status-info-inverse-default);\n --pill-green-bg-default: var(--mode-color-status-positive-default);\n --pill-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n --pill-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n --pill-green-bg-hover: var(--mode-color-status-positive-hover);\n --pill-green-border-default: var(--mode-color-status-positive-default);\n --pill-green-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n --pill-green-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n --pill-green-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n --pill-green-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n --pill-green-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n --pill-gray-bg-default: var(--mode-color-status-neutral-default);\n --pill-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n --pill-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n --pill-gray-bg-hover: var(--mode-color-status-neutral-hover);\n --pill-gray-border-default: var(--mode-color-status-neutral-default);\n --pill-gray-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n --pill-gray-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n --pill-gray-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n --pill-gray-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n --pill-gray-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n --pill-lime-bg-default: var(--mode-color-status-custom-lime-default);\n --pill-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n --pill-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n --pill-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n --pill-lime-border-default: var(--mode-color-status-custom-lime-default);\n --pill-orange-bg-default: var(--mode-color-status-warning-default);\n --pill-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n --pill-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n --pill-orange-bg-hover: var(--mode-color-status-warning-hover);\n --pill-orange-border-default: var(--mode-color-status-warning-default);\n --pill-orange-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n --pill-orange-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n --pill-orange-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n --pill-orange-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n --pill-orange-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n --pill-pink-bg-default: var(--mode-color-status-custom-pink-default);\n --pill-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n --pill-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n --pill-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n --pill-pink-border-default: var(--mode-color-status-custom-pink-default);\n --pill-purple-bg-default: var(--mode-color-status-priority-default);\n --pill-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n --pill-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n --pill-purple-bg-hover: var(--mode-color-status-priority-hover);\n --pill-purple-border-default: var(--mode-color-status-priority-default);\n --pill-purple-inverse-bg-default: var(--mode-color-status-priority-default);\n --pill-purple-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n --pill-purple-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-hover);\n --pill-purple-inverse-border-default: var(--mode-color-status-priority-default);\n --pill-red-bg-default: var(--mode-color-status-negative-default);\n --pill-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n --pill-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n --pill-red-bg-hover: var(--mode-color-status-negative-hover);\n --pill-red-border-default: var(--mode-color-status-negative-default);\n --pill-red-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n --pill-red-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n --pill-red-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n --pill-red-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n --pill-red-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n --pill-slate-bg-default: var(--mode-color-status-custom-slate-default);\n --pill-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n --pill-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n --pill-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n --pill-slate-border-default: var(--mode-color-status-custom-slate-default);\n --pill-teal-bg-default: var(--mode-color-status-custom-teal-default);\n --pill-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n --pill-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n --pill-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n --pill-teal-border-default: var(--mode-color-status-custom-teal-default);\n --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n --tab-bg-default: var(--mode-color-none);\n --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n --tab-border-active: var(--mode-color-action-grayscale-active);\n --tab-border-default: var(--mode-color-generic-fg-moderate);\n --tab-border-hover: var(--mode-color-generic-fg-firm);\n --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-label-active: var(--mode-color-action-grayscale-active);\n --tab-icon-active: var(--mode-color-action-grayscale-active);\n --tab-label-default: var(--mode-color-action-grayscale-default);\n --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n --tab-validation-border-warning: var(--mode-color-status-warning-default);\n --tab-validation-border-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-error: var(--mode-color-status-negative-default);\n --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n --tab-validation-label-error: var(--mode-color-status-negative-default);\n --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n --table-header-subtle-bg-default: var(--mode-color-none);\n --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);\n --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);\n --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n --table-row-bg-default: var(--mode-color-generic-bg-nought);\n --table-row-bg-alt: var(--mode-color-generic-bg-delicate);\n --table-row-bg-alt2: var(--mode-color-generic-bg-faint);\n --table-row-bg-alt3: var(--mode-color-generic-bg-soft);\n --table-row-bg-selected: var(--mode-color-generic-bg-soft);\n --table-row-border-default: var(--mode-color-generic-fg-soft);\n --table-row-label-default: var(--mode-color-generic-txt-severe);\n --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n --table-footer-bg-default: var(--mode-color-generic-bg-soft);\n --table-footer-border-default: var(--mode-color-generic-fg-soft);\n --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";export{e as default};

package/lib/components/menu/__internal__/submenu/submenu.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../menu-item/menu-item.style.js"),r=require("./submenu.style.js"),u=require("../../../../__internal__/utils/helpers/events/events.js"),o=require("../strict-menu.context.js"),a=require("../keyboard-navigation/index.js"),l=require("./submenu.context.js"),i=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../locators.js"),c=require("../../../../hooks/__internal__/useStableCallback/useStableCallback.js"),d=require("../../../navigation-bar/__internal__/fixed-navigation-bar.context.js"),p=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function m(e){return e&&e.__esModule?e:{default:e}}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){f(e,t,n[t])}))}return e}function y(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const S=m(t).default.forwardRef(((m,f)=>{var{children:S,className:v,title:O,icon:h,submenuDirection:g="right",onKeyDown:j,variant:w="default",showDropdownArrow:x=!0,clickToOpen:_,href:C,maxWidth:E,asPassiveItem:D,onSubmenuOpen:L,onSubmenuClose:k,onClick:A,submenuMaxWidth:P,submenuMinWidth:T}=m,q=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0\|\|(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(m,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[K,I]=t.useState(null),R=t.useRef(i.default()),{inFullscreenView:M,openSubmenuId:F,setOpenSubmenuId:W,menuType:B}=o.useStrictMenuContext(),[N,H]=t.useState(!1),[V,$]=t.useState(null),[U,X]=t.useState([]),[z,G]=t.useState(""),[J,Q]=t.useState(!1),[Y,Z]=t.useState(!1),ee=U.length,{submenuMaxHeight:te}=t.useContext(d.default),ne=c.useStableCallback(L),re=t.useMemo((()=>{const e=null==K?void 0:K.querySelectorAll(s.BLOCK_INDEX_SELECTOR);if(e&&N&&ee){const t=Array.from(e),n=null==K?void 0:K.querySelector(`[data-component='${s.SCROLLABLE_BLOCK}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${s.SCROLLABLE_BLOCK_PARENT}']`))?r+1:r}return-1}),[N,ee,K]),ue=t.useRef(null),oe=t.useCallback((()=>{ue.current=setTimeout((()=>{G("")}),1500)}),[]),ae=t.useCallback((()=>{ue.current&&clearTimeout(ue.current),oe()}),[oe]);t.useEffect((()=>()=>{ue.current&&clearTimeout(ue.current)}),[]);const le=t.useCallback((()=>{H(!0),W(R.current)}),[W]),ie=t.useRef();t.useEffect((()=>{N&&K&&(()=>{var e;const t=Array.from(~~(null==~~K~~?void 0:K~~.querySelectorAll("~~ul:not(~~[data-component='~~submenu~~'])"))\|\|[])~~;if(~~0~~===~~t.length)~~return~~;const n=Array.from(~~(null==~~K~~?void 0:K~~.querySelectorAll("[data-component='~~menu-item~~']"))\|\|[]).~~pop~~();~~ie.current=n;~~const r=t.~~pop()~~,u=~~Boolean~~((null==r\|\|null===(e=r.parentElement)\|\|void 0===e?void 0:e.dataset.component)===s.SCROLLABLE_BLOCK),o=Array.from(~~(null==r?void 0:r~~.querySelectorAll("[data-component='menu-item']"))\|\|[]).~~pop()~~;let a=!1;o&&r&&(a=o.getBoundingClientRect().bottom<r.getBoundingClientRect().bottom);const l=!!o&&o===n;Q(l),Z(l&&!u\|\|l&&u&&!a)})()}),[N,K,ee]),t.useEffect((()=>{N&&ne&&ne()}),[N,ne]);const se=t.useCallback((()=>{H(!1),$(null),k&&k(),G("")}),[k]);t.useEffect((()=>{F&&F!==R.current&&se()}),[F,se]);const ce=t.useCallback((e=>U.findIndex((t=>t===e))),[U]),de=t.useCallback((e=>{const t=u.default.isEnterKey(e)\|\|u.default.isSpaceKey(e);if(!t&&!u.default.isDownKey(e)\|\|N\|\|(e.preventDefault(),le()),N){const n=ce(V);let r=n;if(V\|\|((t&&!C\|\|u.default.isSpaceKey(e)&&C)&&(e.preventDefault(),se()),u.default.isShiftKey(e)&&u.default.isTabKey(e)&&se()),u.default.isDownKey(e)&&(e.preventDefault(),r<ee-1&&(r+=1)),u.default.isUpKey(e)&&(e.preventDefault(),Q(!1),r>0&&(r-=1)),u.default.isEscKey(e))return null==j\|\|j(e),void se();u.default.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),u.default.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ee-1),1===e.key.length?(e.stopPropagation(),ue.current?ae():oe(),G(`${z}${e.key.toLowerCase()}`)):G(""),u.default.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")\|\|"input-icon-toggle"===e.getAttribute("data-element"))))\|\|u.default.isEnterKey(e)&&setTimeout((()=>se()),0),r!==n&&$(U[r])}}),[U,N,C,ee,V,ce,le,se,j,z,ae~~,oe~~]);return t.useEffect((()=>{if(K&&S){const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);e&&X(Array.from(e).filter((e=>e.querySelector(p.defaultFocusableSelectors))).map((e=>e.getAttribute("id"))))}}),[S,N,K]),t.useEffect((()=>{const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);if(e&&""!==z){const t=Array.from(e),n=a.characterNavigation(z,t);n&&$(n.id)}}),[K,z,U]),M?e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper",inFullscreenView:M,asPassiveItem:D,menuType:B,children:[e.jsx(n.default,y(b({},q),{onClick:D?void 0:A,className:v,menuType:B,ref:f,href:C,menuItemVariant:w,inFullscreenView:M,asDiv:D,children:O})),e.jsx(r.StyledSubmenu,{"data-component":"submenu",variant:w,menuType:B,inFullscreenView:M,ref:I,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:Y,children:e.jsx(l.default.Provider,{value:{handleKeyDown:de,blockIndex:re,updateFocusId:$},children:S})})]}):e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:_?void 0:()=>le(),onMouseLeave:()=>se(),isSubmenuOpen:N,ref:I,children:[e.jsx(n.default,y(b({},q),{className:v,menuType:B,ref:f,icon:h,tabIndex:-1,menuItemVariant:w,isOpen:N,hasSubmenu:!0,showDropdownArrow:x,onKeyDown:de,onClick:e=>{le(),A&&A(e)},clickToOpen:_,href:C,maxWidth:E,"aria-expanded":N,"data-role":"submenu-parent-item",children:O})),N&&e.jsx(r.StyledSubmenu,{"data-component":"submenu",submenuDirection:g,variant:w,menuType:B,role:0===re?"presentation":"list",maxHeight:te,applyFocusRadiusStyling:J,applyFocusRadiusStylingToLastItem:Y,submenuMaxWidth:P,submenuMinWidth:T,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)\|\|se()},children:e.jsx(l.default.Provider,{value:{submenuFocusId:V,handleKeyDown:de,blockIndex:re,updateFocusId:$,submenuHasMaxWidth:!!P},children:S})})]})}));S.displayName="submenu",exports.default=S;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../menu-item/menu-item.style.js"),r=require("./submenu.style.js"),u=require("../../../../__internal__/utils/helpers/events/events.js"),a=require("../strict-menu.context.js"),l=require("../keyboard-navigation/index.js"),o=require("./submenu.context.js"),i=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../locators.js"),c=require("../../../../hooks/__internal__/useStableCallback/useStableCallback.js"),d=require("../../../navigation-bar/__internal__/fixed-navigation-bar.context.js"),m=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function f(e){return e&&e.__esModule?e:{default:e}}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){p(e,t,n[t])}))}return e}function y(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const S=f(t).default.forwardRef(((f,p)=>{var{children:S,className:v,title:h,icon:O,submenuDirection:g="right",onKeyDown:j,variant:w="default",showDropdownArrow:x=!0,clickToOpen:_,href:C,maxWidth:E,asPassiveItem:A,onSubmenuOpen:D,onSubmenuClose:L,onClick:k,submenuMaxWidth:P,submenuMinWidth:q}=f,T=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0\|\|(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(f,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[K,I]=t.useState(null),R=t.useRef(i.default()),{inFullscreenView:M,openSubmenuId:F,setOpenSubmenuId:W,menuType:B}=a.useStrictMenuContext(),[N,H]=t.useState(!1),[V,$]=t.useState(null),[U,X]=t.useState([]),[z,G]=t.useState(""),[J,Q]=t.useState(!1),[Y,Z]=t.useState(!1),ee=U.length,{submenuMaxHeight:te}=t.useContext(d.default),ne=c.useStableCallback(D),re=t.useMemo((()=>{const e=null==K?void 0:K.querySelectorAll(s.BLOCK_INDEX_SELECTOR);if(e&&N&&ee){const t=Array.from(e),n=null==K?void 0:K.querySelector(`[data-component='${s.SCROLLABLE_BLOCK}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${s.SCROLLABLE_BLOCK_PARENT}']`))?r+1:r}return-1}),[N,ee,K]),ue=t.useRef(null),ae=t.useCallback((()=>{ue.current=setTimeout((()=>{G("")}),1500)}),[]),le=t.useCallback((()=>{ue.current&&clearTimeout(ue.current),ae()}),[ae]);t.useEffect((()=>()=>{ue.current&&clearTimeout(ue.current)}),[]);const oe=t.useCallback((()=>{H(!0),W(R.current)}),[W]),ie=t.useRef();t.useEffect((()=>{N&&K&&(()=>{var e;if(!K)return;const t=Array.from(K.querySelectorAll("[data-component='menu-item']")\|\|[]),n=t.length>0?t[t.length-1]:null;ie.current=null!=n?n:void 0,K.querySelectorAll("[data-last-visible-menu-item]").forEach((e=>e.removeAttribute("data-last-visible-menu-item"))),n&&n.setAttribute("data-last-visible-menu-item","true");const r=Array.from(K.querySelectorAll("ul:not([data-component='submenu'])")\|\|[]);if(0===r.length)return Q(!1),void Z(!1);const u=r[r.length-1],a=(null==u\|\|null===(e=u.parentElement)\|\|void 0===e?void 0:e.dataset.component)===s.SCROLLABLE_BLOCK,l=Array.from(u.querySelectorAll("[data-component='menu-item']")\|\|[]),o=l.length>0?l[l.length-1]:null;let i=!1;o&&u&&(i=o.getBoundingClientRect().bottom<u.getBoundingClientRect().bottom);const c=!!o&&!!n&&o===n;Q(c),Z(c&&!a\|\|c&&a&&!i)})()}),[N,K,ee]),t.useEffect((()=>{N&&ne&&ne()}),[N,ne]);const se=t.useCallback((()=>{H(!1),$(null),L&&L(),G("")}),[L]);t.useEffect((()=>{F&&F!==R.current&&se()}),[F,se]);const ce=t.useCallback((e=>U.findIndex((t=>t===e))),[U]),de=t.useCallback((e=>{const t=u.default.isEnterKey(e)\|\|u.default.isSpaceKey(e);if(!t&&!u.default.isDownKey(e)\|\|N\|\|(e.preventDefault(),oe()),N){const n=ce(V);let r=n;if(V\|\|((t&&!C\|\|u.default.isSpaceKey(e)&&C)&&(e.preventDefault(),se()),u.default.isShiftKey(e)&&u.default.isTabKey(e)&&se()),u.default.isDownKey(e)&&(e.preventDefault(),r<ee-1&&(r+=1)),u.default.isUpKey(e)&&(e.preventDefault(),Q(!1),r>0&&(r-=1)),u.default.isEscKey(e))return null==j\|\|j(e),void se();u.default.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),u.default.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ee-1),1===e.key.length?(e.stopPropagation(),ue.current?le():ae(),G(`${z}${e.key.toLowerCase()}`)):G(""),u.default.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")\|\|"input-icon-toggle"===e.getAttribute("data-element"))))\|\|u.default.isEnterKey(e)&&setTimeout((()=>se()),0),r!==n&&$(U[r])}}),[U,N,C,ee,V,ce,oe,se,j,z,le,ae]);return t.useEffect((()=>{if(K&&S){const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);e&&X(Array.from(e).filter((e=>e.querySelector(m.defaultFocusableSelectors))).map((e=>e.getAttribute("id"))))}}),[S,N,K]),t.useEffect((()=>{const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);if(e&&""!==z){const t=Array.from(e),n=l.characterNavigation(z,t);n&&$(n.id)}}),[K,z,U]),M?e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper",inFullscreenView:M,asPassiveItem:A,menuType:B,children:[e.jsx(n.default,y(b({},T),{onClick:A?void 0:k,className:v,menuType:B,ref:p,href:C,menuItemVariant:w,inFullscreenView:M,asDiv:A,children:h})),e.jsx(r.StyledSubmenu,{"data-component":"submenu",variant:w,menuType:B,inFullscreenView:M,ref:I,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:Y,children:e.jsx(o.default.Provider,{value:{handleKeyDown:de,blockIndex:re,updateFocusId:$},children:S})})]}):e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:_?void 0:()=>oe(),onMouseLeave:()=>se(),isSubmenuOpen:N,ref:I,children:[e.jsx(n.default,y(b({},T),{className:v,menuType:B,ref:p,icon:O,tabIndex:-1,menuItemVariant:w,isOpen:N,hasSubmenu:!0,showDropdownArrow:x,onKeyDown:de,onClick:e=>{oe(),k&&k(e)},clickToOpen:_,href:C,maxWidth:E,"aria-expanded":N,"data-role":"submenu-parent-item",children:h})),N&&e.jsx(r.StyledSubmenu,{"data-component":"submenu",submenuDirection:g,variant:w,menuType:B,role:0===re?"presentation":"list",maxHeight:te,applyFocusRadiusStyling:J,applyFocusRadiusStylingToLastItem:Y,submenuMaxWidth:P,submenuMinWidth:q,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)\|\|se()},children:e.jsx(o.default.Provider,{value:{submenuFocusId:V,handleKeyDown:de,blockIndex:re,updateFocusId:$,submenuHasMaxWidth:!!P},children:S})})]})}));S.displayName="submenu",exports.default=S;

package/lib/components/menu/__internal__/submenu/submenu.style.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var e=require("styled-components"),t=require("../../scrollable-block/scrollable-block.style.js"),r=require("../../../../style/themes/apply-base-theme.js"),i=require("../../../link/link.style.js"),d=require("../../menu.style.js"),a=require("../../../box/box.style.js"),o=require("../../menu-item/menu-item.style.js"),s=require("../../../icon/icon.style.js"),u=require("../../menu.config.js"),n=require("../../menu-segment-title/menu-segment-title.style.js");function l(e){return e&&e.__esModule?e:{default:e}}var b=l(e);const m=b.default.div.attrs(r.default).withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"sc-~~57ceb950~~-0"})(["position:relative;width:fit-content;max-width:inherit;height:inherit;"," ",""],(({isSubmenuOpen:t,theme:r})=>t&&e.css(["z-index:",";"],r.zIndex.popover)),(({inFullscreenView:t,menuType:r,asPassiveItem:i})=>e.css([""," ",""],t&&e.css(["width:100%;",""],i&&r&&e.css(["","{outline:none;color:",";}"],o.default,u.default[r].title)),!t&&e.css(["display:flex;"])))),c=b.default.ul.withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"sc-~~57ceb950~~-1"})(["",""],(({menuType:r,submenuDirection:l,variant:b,inFullscreenView:m,maxHeight:c,applyFocusRadiusStyling:h,applyFocusRadiusStylingToLastItem:p,submenuMaxWidth:y,submenuMinWidth:g})=>e.css([""," "," "," display:block;list-style:none;margin:0;padding:0;",":after,",":hover:after{display:none;}","{display:flex;align-items:center;white-space:nowrap;"," "," "," a{text-decoration:none;}> ",'{width:16px;height:16px;margin-right:5px;}}[data-component="icon"]{line-height:20px;&:before{line-height:unset;}span{vertical-align:middle;svg{height:16px;width:16px;}}}&:before{background-color:transparent;border-radius:0 0 4px 4px;content:"";height:5px;position:absolute;top:-5px;width:100%;}',""],!m&&r&&e.css(["box-shadow:var(--boxShadow100);position:absolute;top:100%;background-color:",";min-width:",";"," a,button,"," a,"," button{width:100%;}"],"default"===b?u.default[r].submenuItemBackground:u.default[r].background,null!=g?g:"100%",y&&e.css(["width:max-content;max-width:",";li{max-width:",";}&&&{a,button,"," a,"," button{white-space:normal;height:auto;}}"],y,y,i.StyledLink,i.StyledLink),i.StyledLink,i.StyledLink),m&&e.css(["min-width:100%;","{width:100%;}"],d.StyledMenuItem),!m&&e.css(["border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);overflow-y:auto;"," ","~~:last-child~~ a,",":last-~~child button,","~~:last-~~child~~ > span~~,",":last-child~~ > div{border-bottom-~~left~~-radius:var(--~~borderRadius100~~);border-bottom-right-radius:var(--~~borderRadius100~~);~~}& "," > ",":last~~-of-~~type a,"," > ","~~:last-of-~~type button,~~"," ~~> "~~,~~":last-of-type~~ > span~~,","~~ ~~> ",":last-of-type >~~ div{border-bottom-~~right~~-radius:var(--~~borderRadius000~~);border-bottom-~~left~~-radius:var(--~~borderRadius000~~);:focus{border-bottom-right-radius:~~","~~;border-bottom-left-radius:~~","~~;}}&&&& ","{","{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";",":last-child ",",",":last-child a,",":last-child button{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";}}}"],c&&`max-height: ${c};`,~~d.StyledMenuItem,d.StyledMenuItem,d.StyledMenuItem,d.StyledMenuItem,~~n.StyledSegmentChildren,d.StyledMenuItem,n.StyledSegmentChildren,d.StyledMenuItem,n.StyledSegmentChildren,d.StyledMenuItem,n.StyledSegmentChildren,d.StyledMenuItem,p?"var(--borderRadius100)":"var(--borderRadius000)",p?"var(--borderRadius100)":"var(--borderRadius000)",t.default,a.default,h?"var(--borderRadius100)":"var(--borderRadius000)",d.StyledMenuItem,i.StyledLink,d.StyledMenuItem,d.StyledMenuItem,p?"var(--borderRadius100)":"var(--borderRadius000)"),o.default,o.default,o.default,m&&e.css(["white-space:normal;height:auto;"]),y&&e.css(["height:auto;min-height:40px;"]),!m&&r&&e.css(["background-color:",";> a:focus,> button:focus{background-color:",";}> a,> button{padding:11px 16px 12px;}"],u.default[r].submenuItemBackground,u.default[r].submenuItemBackground),s.default,"left"===l&&e.css(["right:0;"]))));exports.StyledSubmenu=c,exports.StyledSubmenuWrapper=m;
1	+ "use strict";var e=require("styled-components"),t=require("../../scrollable-block/scrollable-block.style.js"),r=require("../../../../style/themes/apply-base-theme.js"),i=require("../../../link/link.style.js"),o=require("../../menu.style.js"),a=require("../../../box/box.style.js"),d=require("../../menu-item/menu-item.style.js"),s=require("../../../icon/icon.style.js"),u=require("../../menu.config.js"),n=require("../../menu-segment-title/menu-segment-title.style.js");function l(e){return e&&e.__esModule?e:{default:e}}var b=l(e);const m=b.default.div.attrs(r.default).withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"sc-49c71dfb-0"})(["position:relative;width:fit-content;max-width:inherit;height:inherit;"," ",""],(({isSubmenuOpen:t,theme:r})=>t&&e.css(["z-index:",";"],r.zIndex.popover)),(({inFullscreenView:t,menuType:r,asPassiveItem:i})=>e.css([""," ",""],t&&e.css(["width:100%;",""],i&&r&&e.css(["","{outline:none;color:",";}"],d.default,u.default[r].title)),!t&&e.css(["display:flex;"])))),c=b.default.ul.withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"sc-49c71dfb-1"})(["",""],(({menuType:r,submenuDirection:l,variant:b,inFullscreenView:m,maxHeight:c,applyFocusRadiusStyling:h,applyFocusRadiusStylingToLastItem:p,submenuMaxWidth:f,submenuMinWidth:g})=>e.css([""," "," "," display:block;list-style:none;margin:0;padding:0;",":after,",":hover:after{display:none;}","{display:flex;align-items:center;white-space:nowrap;"," "," "," a{text-decoration:none;}> ",'{width:16px;height:16px;margin-right:5px;}}[data-component="icon"]{line-height:20px;&:before{line-height:unset;}span{vertical-align:middle;svg{height:16px;width:16px;}}}&:before{background-color:transparent;border-radius:0 0 4px 4px;content:"";height:5px;position:absolute;top:-5px;width:100%;}',""],!m&&r&&e.css(["box-shadow:var(--boxShadow100);position:absolute;top:100%;background-color:",";min-width:",";"," a,button,"," a,"," button{width:100%;}"],"default"===b?u.default[r].submenuItemBackground:u.default[r].background,null!=g?g:"100%",f&&e.css(["width:max-content;max-width:",";li{max-width:",";}&&&{a,button,"," a,"," button{white-space:normal;height:auto;}}"],f,f,i.StyledLink,i.StyledLink),i.StyledLink,i.StyledLink),m&&e.css(["min-width:100%;","{width:100%;}"],o.StyledMenuItem),!m&&e.css(["border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);overflow-y:auto;"," & "," > ",":last-of-type:not([data-last-visible-menu-item='true']){a,button,> span,> div{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);:focus{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);}}}[data-last-visible-menu-item=\"true\"]{a,button,> span,> div{border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);:focus{border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);}}}&&&& ","{","{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";",":last-child ",",",":last-child a,",":last-child button{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";}}}"],c&&`max-height: ${c};`,n.StyledSegmentChildren,o.StyledMenuItem,t.default,a.default,h?"var(--borderRadius100)":"var(--borderRadius000)",o.StyledMenuItem,i.StyledLink,o.StyledMenuItem,o.StyledMenuItem,p?"var(--borderRadius100)":"var(--borderRadius000)"),d.default,d.default,d.default,m&&e.css(["white-space:normal;height:auto;"]),f&&e.css(["height:auto;min-height:40px;"]),!m&&r&&e.css(["background-color:",";> a:focus,> button:focus{background-color:",";}> a,> button{padding:11px 16px 12px;}"],u.default[r].submenuItemBackground,u.default[r].submenuItemBackground),s.default,"left"===l&&e.css(["right:0;"]))));exports.StyledSubmenu=c,exports.StyledSubmenuWrapper=m;