@spectrum-web-components/styles/tokens/spectrum/index.css

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are ma

:host,
:root {
    --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
    --spectrum-menu-item-background-color-default-opacity: 0;
    --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
    --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
    --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
    --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
    --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
    --spectrum-dropindicator-color: var(--spectrum-blue-700);
    --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
    --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07);
    --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
    --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
    --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200);
    --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25);
    --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07);
    --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
    --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
    --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
    --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
    --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
    --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
    --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
    --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
    --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
    --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
    --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
    --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
    --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
    --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
    --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
    --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
    --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
    --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
    --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
    --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
    --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
    --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
    --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
    --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25);
    --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
    --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
    --spectrum-swatch-border-color-rgb: 255, 255, 255;
    --spectrum-swatch-border-color-opacity: 0.51;
    --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
    --spectrum-swatch-border-color-light-rgb: 255, 255, 255;
    --spectrum-swatch-border-color-light-opacity: 0.2;
    --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
}
:host,
:root {
    --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
    --spectrum-menu-item-background-color-default-opacity: 0;
    --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
    --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200);
    --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200);
    --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200);
    --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
    --spectrum-dropindicator-color: var(--spectrum-blue-700);
    --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
    --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08);
    --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
    --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
    --spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15);
    --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3);
    --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08);
    --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
    --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
    --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
    --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
    --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
    --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
    --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
    --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
    --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08);
    --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
    --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
    --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
    --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
    --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
    --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
    --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
    --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
    --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
    --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
    --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
    --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
    --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
    --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
    --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3);
    --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
    --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
    --spectrum-swatch-border-color-rgb: 255, 255, 255;
    --spectrum-swatch-border-color-opacity: 0.51;
    --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
    --spectrum-swatch-border-color-light-rgb: 255, 255, 255;
    --spectrum-swatch-border-color-light-opacity: 0.2;
    --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
}
:host,
:root {
    --spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700);
    --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800);
    --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
    --spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-800);
    --spectrum-slider-track-thickness: 2px;
    --spectrum-slider-handle-gap: 4px;
    --spectrum-picker-border-width: var(--spectrum-border-width-100);
    --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
    --spectrum-in-field-button-edge-to-fill: 0px;
    --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
    --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
    --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
    --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
    --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
    --spectrum-corner-radius-75: 2px;
    --spectrum-drop-shadow-x: 0px;
    --spectrum-border-width-100: 1px;
    --spectrum-accent-color-100: var(--spectrum-blue-100);
    --spectrum-accent-color-200: var(--spectrum-blue-200);
    --spectrum-accent-color-300: var(--spectrum-blue-300);
    --spectrum-accent-color-400: var(--spectrum-blue-400);
    --spectrum-accent-color-500: var(--spectrum-blue-500);
    --spectrum-accent-color-600: var(--spectrum-blue-600);
    --spectrum-accent-color-700: var(--spectrum-blue-700);
    --spectrum-accent-color-800: var(--spectrum-blue-800);
    --spectrum-accent-color-900: var(--spectrum-blue-900);
    --spectrum-accent-color-1000: var(--spectrum-blue-1000);
    --spectrum-accent-color-1100: var(--spectrum-blue-1100);
    --spectrum-accent-color-1200: var(--spectrum-blue-1200);
    --spectrum-accent-color-1300: var(--spectrum-blue-1300);
    --spectrum-accent-color-1400: var(--spectrum-blue-1400);
    --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
    --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
    --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
    --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
    --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight);
    --system: spectrum;
    --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
    --spectrum-animation-duration-0: 0s;
    --spectrum-animation-duration-100: 0.13s;
    --spectrum-animation-duration-200: 0.16s;
    --spectrum-animation-duration-300: 0.19s;
    --spectrum-animation-duration-400: 0.22s;
    --spectrum-animation-duration-500: 0.25s;
    --spectrum-animation-duration-600: 0.3s;
    --spectrum-animation-duration-700: 0.35s;
    --spectrum-animation-duration-800: 0.4s;
    --spectrum-animation-duration-900: 0.45s;
    --spectrum-animation-duration-1000: 0.5s;
    --spectrum-animation-duration-2000: 1s;
    --spectrum-animation-duration-4000: 2s;
    --spectrum-animation-duration-6000: 3s;
    --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
    --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
    --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
    --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
    --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
    --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
    --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
    --spectrum-serif-font: var(--spectrum-serif-font-family-stack);
    --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
    --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
    --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
    --spectrum-font-family: var(--spectrum-sans-font-family-stack);
    --spectrum-font-style: var(--spectrum-default-font-style);
    --spectrum-font-size: var(--spectrum-font-size-100);
    --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
    --spectrum-cjk-font: var(--spectrum-code-font-family-stack);
    --spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
    --spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
    --spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
    --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
    --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
}
:host,
:root {
    --spectrum-checkbox-control-size-small: 16px;
    --spectrum-checkbox-control-size-medium: 18px;
    --spectrum-checkbox-control-size-large: 20px;
    --spectrum-checkbox-control-size-extra-large: 22px;
    --spectrum-checkbox-top-to-control-small: 7px;
    --spectrum-checkbox-top-to-control-medium: 11px;
    --spectrum-checkbox-top-to-control-large: 15px;
    --spectrum-checkbox-top-to-control-extra-large: 19px;
    --spectrum-switch-control-width-small: 32px;
    --spectrum-switch-control-width-medium: 36px;
    --spectrum-switch-control-width-large: 41px;
    --spectrum-switch-control-width-extra-large: 46px;
    --spectrum-switch-control-height-small: 16px;
    --spectrum-switch-control-height-medium: 18px;
    --spectrum-switch-control-height-large: 20px;
    --spectrum-switch-control-height-extra-large: 22px;
    --spectrum-switch-top-to-control-small: 7px;
    --spectrum-switch-top-to-control-medium: 11px;
    --spectrum-switch-top-to-control-large: 15px;
    --spectrum-switch-top-to-control-extra-large: 19px;
    --spectrum-radio-button-control-size-small: 16px;
    --spectrum-radio-button-control-size-medium: 18px;
    --spectrum-radio-button-control-size-large: 20px;
    --spectrum-radio-button-control-size-extra-large: 22px;
    --spectrum-radio-button-top-to-control-small: 7px;
    --spectrum-radio-button-top-to-control-medium: 11px;
    --spectrum-radio-button-top-to-control-large: 15px;
    --spectrum-radio-button-top-to-control-extra-large: 19px;
    --spectrum-slider-control-height-small: 18px;
    --spectrum-slider-control-height-medium: 20px;
    --spectrum-slider-control-height-large: 22px;
    --spectrum-slider-control-height-extra-large: 26px;
    --spectrum-slider-handle-size-small: 18px;
    --spectrum-slider-handle-size-medium: 20px;
    --spectrum-slider-handle-size-large: 22px;
    --spectrum-slider-handle-size-extra-large: 26px;
    --spectrum-slider-handle-border-width-down-small: 7px;
    --spectrum-slider-handle-border-width-down-medium: 8px;
    --spectrum-slider-handle-border-width-down-large: 9px;
    --spectrum-slider-handle-border-width-down-extra-large: 11px;
    --spectrum-slider-bottom-to-handle-small: 6px;
    --spectrum-slider-bottom-to-handle-medium: 10px;
    --spectrum-slider-bottom-to-handle-large: 14px;
    --spectrum-slider-bottom-to-handle-extra-large: 17px;
    --spectrum-corner-radius-100: 5px;
    --spectrum-corner-radius-200: 10px;
    --spectrum-drop-shadow-y: 2px;
    --spectrum-drop-shadow-blur: 6px;
    --spectrum-slider-tick-mark-height: 13px;
    --spectrum-slider-ramp-track-height: 20px;
    --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
    --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
    --spectrum-colorwheel-colorarea-container-size: 182px;
    --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
    --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
    --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
    --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
    --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
    --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
    --spectrum-menu-item-checkmark-height-small: 12px;
    --spectrum-menu-item-checkmark-height-medium: 14px;
    --spectrum-menu-item-checkmark-height-large: 16px;
    --spectrum-menu-item-checkmark-height-extra-large: 16px;
    --spectrum-menu-item-checkmark-width-small: 12px;
    --spectrum-menu-item-checkmark-width-medium: 14px;
    --spectrum-menu-item-checkmark-width-large: 16px;
    --spectrum-menu-item-checkmark-width-extra-large: 16px;
    --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
    --spectrum-button-top-to-text-small: 6px;
    --spectrum-button-bottom-to-text-small: 5px;
    --spectrum-button-top-to-text-medium: 9px;
    --spectrum-button-bottom-to-text-medium: 10px;
    --spectrum-button-top-to-text-large: 12px;
    --spectrum-button-bottom-to-text-large: 13px;
    --spectrum-button-top-to-text-extra-large: 16px;
    --spectrum-button-bottom-to-text-extra-large: 17px;
    --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
    --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
    --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
    --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
    --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
    --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
    --spectrum-coach-indicator-gap: 8px;
    --spectrum-coach-indicator-ring-diameter: 20px;
    --spectrum-coach-indicator-quiet-ring-diameter: 10px;
    --spectrum-coachmark-buttongroup-display: none;
    --spectrum-coachmark-buttongroup-mobile-display: flex;
    --spectrum-coachmark-menu-display: none;
    --spectrum-coachmark-menu-mobile-display: inline-flex;
    --spectrum-well-padding: 20px;
    --spectrum-well-margin-top: 5px;
    --spectrum-well-min-width: 300px;
    --spectrum-well-border-radius: 5px;
    --spectrum-workflow-icon-size-xxl: 40px;
    --spectrum-workflow-icon-size-xxs: 15px;
    --spectrum-treeview-item-indentation-medium: 20px;
    --spectrum-treeview-item-indentation-small: 15px;
    --spectrum-treeview-item-indentation-large: 25px;
    --spectrum-treeview-item-indentation-extra-large: 30px;
    --spectrum-treeview-indicator-inset-block-start: 6px;
    --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
    --spectrum-dialog-confirm-entry-animation-distance: 25px;
    --spectrum-dialog-confirm-hero-height: 160px;
    --spectrum-dialog-confirm-border-radius: 5px;
    --spectrum-dialog-confirm-title-text-size: 19px;
    --spectrum-dialog-confirm-description-text-size: 15px;
    --spectrum-dialog-confirm-padding-grid: 24px;
    --spectrum-datepicker-initial-width: 160px;
    --spectrum-datepicker-generic-padding: 15px;
    --spectrum-datepicker-dash-line-height: 30px;
    --spectrum-datepicker-width-quiet-first: 90px;
    --spectrum-datepicker-width-quiet-second: 20px;
    --spectrum-datepicker-datetime-width-first: 45px;
    --spectrum-datepicker-invalid-icon-to-button: 10px;
    --spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
    --spectrum-datepicker-input-datetime-width: 30px;
    --spectrum-pagination-textfield-width: 60px;
    --spectrum-pagination-item-inline-spacing: 6px;
    --spectrum-dial-border-radius: 20px;
    --spectrum-dial-handle-position: 10px;
    --spectrum-dial-handle-block-margin: 20px;
    --spectrum-dial-handle-inline-margin: 20px;
    --spectrum-dial-controls-margin: 10px;
    --spectrum-dial-label-gap-y: 6px;
    --spectrum-dial-label-container-top-to-text: 5px;
    --spectrum-assetcard-focus-ring-border-radius: 9px;
    --spectrum-assetcard-selectionindicator-margin: 15px;
    --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
    --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
    --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
    --spectrum-tooltip-animation-distance: 5px;
    --spectrum-ui-icon-medium-display: none;
    --spectrum-ui-icon-large-display: block;
}
:host,
:root {
    --spectrum-menu-item-background-color-default-rgb: 0, 0, 0;
    --spectrum-menu-item-background-color-default-opacity: 0;
    --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity));
    --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200);
    --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200);
    --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200);
    --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
    --spectrum-dropindicator-color: var(--spectrum-blue-800);
    --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
    --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06);
    --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
    --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
    --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200);
    --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2);
    --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06);
    --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
    --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
    --spectrum-badge-label-icon-color-primary: var(--spectrum-white);
    --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
    --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
    --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
    --spectrum-well-border-color: var(--spectrum-black);
    --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
    --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
    --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
    --spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
    --spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
    --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
    --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
    --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
    --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
    --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100);
    --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
    --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
    --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
    --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
    --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
    --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
    --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2);
    --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1);
    --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
    --spectrum-swatch-border-color-rgb: 0, 0, 0;
    --spectrum-swatch-border-color-opacity: 0.51;
    --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity));
    --spectrum-swatch-border-color-light-rgb: 0, 0, 0;
    --spectrum-swatch-border-color-light-opacity: 0.2;
    --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity));
}
:host,
:root {
    --spectrum-checkbox-control-size-small: 12px;
    --spectrum-checkbox-control-size-medium: 14px;
    --spectrum-checkbox-control-size-large: 16px;
    --spectrum-checkbox-control-size-extra-large: 18px;
    --spectrum-checkbox-top-to-control-small: 6px;
    --spectrum-checkbox-top-to-control-medium: 9px;
    --spectrum-checkbox-top-to-control-large: 12px;
    --spectrum-checkbox-top-to-control-extra-large: 15px;
    --spectrum-switch-control-width-small: 23px;
    --spectrum-switch-control-width-medium: 26px;
    --spectrum-switch-control-width-large: 29px;
    --spectrum-switch-control-width-extra-large: 33px;
    --spectrum-switch-control-height-small: 12px;
    --spectrum-switch-control-height-medium: 14px;
    --spectrum-switch-control-height-large: 16px;
    --spectrum-switch-control-height-extra-large: 18px;
    --spectrum-switch-top-to-control-small: 6px;
    --spectrum-switch-top-to-control-medium: 9px;
    --spectrum-switch-top-to-control-large: 12px;
    --spectrum-switch-top-to-control-extra-large: 15px;
    --spectrum-radio-button-control-size-small: 12px;
    --spectrum-radio-button-control-size-medium: 14px;
    --spectrum-radio-button-control-size-large: 16px;
    --spectrum-radio-button-control-size-extra-large: 18px;
    --spectrum-radio-button-top-to-control-small: 6px;
    --spectrum-radio-button-top-to-control-medium: 9px;
    --spectrum-radio-button-top-to-control-large: 12px;
    --spectrum-radio-button-top-to-control-extra-large: 15px;
    --spectrum-slider-control-height-small: 14px;
    --spectrum-slider-control-height-medium: 16px;
    --spectrum-slider-control-height-large: 18px;
    --spectrum-slider-control-height-extra-large: 20px;
    --spectrum-slider-handle-size-small: 14px;
    --spectrum-slider-handle-size-medium: 16px;
    --spectrum-slider-handle-size-large: 18px;
    --spectrum-slider-handle-size-extra-large: 20px;
    --spectrum-slider-handle-border-width-down-small: 5px;
    --spectrum-slider-handle-border-width-down-medium: 6px;
    --spectrum-slider-handle-border-width-down-large: 7px;
    --spectrum-slider-handle-border-width-down-extra-large: 8px;
    --spectrum-slider-bottom-to-handle-small: 5px;
    --spectrum-slider-bottom-to-handle-medium: 8px;
    --spectrum-slider-bottom-to-handle-large: 11px;
    --spectrum-slider-bottom-to-handle-extra-large: 14px;
    --spectrum-corner-radius-100: 4px;
    --spectrum-corner-radius-200: 8px;
    --spectrum-drop-shadow-y: 1px;
    --spectrum-drop-shadow-blur: 4px;
    --spectrum-slider-tick-mark-height: 10px;
    --spectrum-slider-ramp-track-height: 16px;
    --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0";
    --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
    --spectrum-colorwheel-colorarea-container-size: 144px;
    --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
    --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
    --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
    --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
    --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
    --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
    --spectrum-menu-item-checkmark-height-small: 10px;
    --spectrum-menu-item-checkmark-height-medium: 10px;
    --spectrum-menu-item-checkmark-height-large: 12px;
    --spectrum-menu-item-checkmark-height-extra-large: 14px;
    --spectrum-menu-item-checkmark-width-small: 10px;
    --spectrum-menu-item-checkmark-width-medium: 10px;
    --spectrum-menu-item-checkmark-width-large: 12px;
    --spectrum-menu-item-checkmark-width-extra-large: 14px;
    --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
    --spectrum-button-top-to-text-small: 5px;
    --spectrum-button-bottom-to-text-small: 4px;
    --spectrum-button-top-to-text-medium: 7px;
    --spectrum-button-bottom-to-text-medium: 8px;
    --spectrum-button-top-to-text-large: 10px;
    --spectrum-button-bottom-to-text-large: 10px;
    --spectrum-button-top-to-text-extra-large: 13px;
    --spectrum-button-bottom-to-text-extra-large: 13px;
    --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
    --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
    --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
    --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
    --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
    --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
    --spectrum-coach-indicator-gap: 6px;
    --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
    --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
    --spectrum-coachmark-buttongroup-display: flex;
    --spectrum-coachmark-buttongroup-mobile-display: none;
    --spectrum-coachmark-menu-display: inline-flex;
    --spectrum-coachmark-menu-mobile-display: none;
    --spectrum-well-padding: var(--spectrum-spacing-300);
    --spectrum-well-margin-top: var(--spectrum-spacing-75);
    --spectrum-well-min-width: 240px;
    --spectrum-well-border-radius: var(--spectrum-spacing-75);
    --spectrum-workflow-icon-size-xxl: 32px;
    --spectrum-workflow-icon-size-xxs: 12px;
    --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
    --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
    --spectrum-treeview-item-indentation-large: 20px;
    --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
    --spectrum-treeview-indicator-inset-block-start: 5px;
    --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
    --spectrum-dialog-confirm-entry-animation-distance: 20px;
    --spectrum-dialog-confirm-hero-height: 128px;
    --spectrum-dialog-confirm-border-radius: 4px;
    --spectrum-dialog-confirm-title-text-size: 18px;
    --spectrum-dialog-confirm-description-text-size: 14px;
    --spectrum-dialog-confirm-padding-grid: 40px;
    --spectrum-datepicker-initial-width: 128px;
    --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
    --spectrum-datepicker-dash-line-height: 24px;
    --spectrum-datepicker-width-quiet-first: 72px;
    --spectrum-datepicker-width-quiet-second: 16px;
    --spectrum-datepicker-datetime-width-first: 36px;
    --spectrum-datepicker-invalid-icon-to-button: 8px;
    --spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
    --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
    --spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
    --spectrum-pagination-item-inline-spacing: 5px;
    --spectrum-dial-border-radius: 16px;
    --spectrum-dial-handle-position: 8px;
    --spectrum-dial-handle-block-margin: 16px;
    --spectrum-dial-handle-inline-margin: 16px;
    --spectrum-dial-controls-margin: 8px;
    --spectrum-dial-label-gap-y: 5px;
    --spectrum-dial-label-container-top-to-text: 4px;
    --spectrum-assetcard-focus-ring-border-radius: 8px;
    --spectrum-assetcard-selectionindicator-margin: 12px;
    --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
    --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
    --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
    --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
    --spectrum-ui-icon-medium-display: block;
    --spectrum-ui-icon-large-display: none;
}