UNPKG

@spectrum-web-components/styles

Version:

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

599 lines 56.1 kB
:host, :root { --system-accordion-divider-color: var(--spectrum-gray-300); --system-accordion-item-content-disabled-color: var(--spectrum-gray-400); --system-accordion-item-content-color: var(--spectrum-gray-800); --system-action-bar-popover-background-color: var(--spectrum-gray-50); --system-action-bar-popover-border-color: var(--spectrum-gray-400); --system-action-button-background-color-default: var(--spectrum-gray-200); --system-action-button-background-color-hover: var(--spectrum-gray-300); --system-action-button-background-color-down: var(--spectrum-gray-400); --system-action-button-background-color-focus: var(--spectrum-gray-300); --system-action-button-background-color-disabled: var(--spectrum-gray-200); --system-action-button-background-color-selected: var(--spectrum-neutral-background-color-selected-default); --system-action-button-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); --system-action-button-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); --system-action-button-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); --system-action-button-border-color-default: transparent; --system-action-button-border-color-hover: transparent; --system-action-button-border-color-down: transparent; --system-action-button-border-color-focus: transparent; --system-action-button-border-color-disabled: transparent; --system-action-button-content-color-selected: var(--spectrum-gray-75); --system-action-button-size-m-border-radius-default: var(--spectrum-corner-radius-100); --system-action-button-size-xs-border-radius-default: var(--spectrum-corner-radius-100); --system-action-button-size-s-border-radius-default: var(--spectrum-corner-radius-100); --system-action-button-size-l-border-radius-default: var(--spectrum-corner-radius-100); --system-action-button-size-xl-border-radius-default: var(--spectrum-corner-radius-100); --system-action-button-quiet-background-color-default: transparent; --system-action-button-quiet-background-color-hover: var(--spectrum-gray-300); --system-action-button-quiet-background-color-down: var(--spectrum-gray-400); --system-action-button-quiet-background-color-focus: var(--spectrum-gray-300); --system-action-button-quiet-background-color-disabled: transparent; --system-action-button-quiet-background-color-selected-disabled: var(--spectrum-disabled-background-color); --system-action-button-static-black-border-color-default: transparent; --system-action-button-static-black-border-color-hover: transparent; --system-action-button-static-black-border-color-down: transparent; --system-action-button-static-black-border-color-focus: transparent; --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --system-action-button-static-black-background-color-disabled: transparent; --system-action-button-static-black-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-200); --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); --system-action-button-static-black-quiet-background-color-default: var(--spectrum-transparent-black-200); --system-action-button-static-black-quiet-background-color-hover: var(--spectrum-transparent-black-300); --system-action-button-static-black-quiet-background-color-down: var(--spectrum-transparent-black-400); --system-action-button-static-black-quiet-background-color-focus: var(--spectrum-transparent-black-300); --system-action-button-static-black-quiet-background-color-disabled: transparent; --system-action-button-static-white-border-color-default: transparent; --system-action-button-static-white-border-color-hover: transparent; --system-action-button-static-white-border-color-down: transparent; --system-action-button-static-white-border-color-focus: transparent; --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); --system-action-button-static-white-background-color-disabled: transparent; --system-action-button-static-white-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-200); --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); --system-action-button-static-white-quiet-background-color-default: var(--spectrum-transparent-white-200); --system-action-button-static-white-quiet-background-color-hover: var(--spectrum-transparent-white-300); --system-action-button-static-white-quiet-background-color-down: var(--spectrum-transparent-white-400); --system-action-button-static-white-quiet-background-color-focus: var(--spectrum-transparent-white-300); --system-action-button-static-white-quiet-background-color-disabled: transparent; --system-action-button-background-color-selected-disabled: var(--spectrum-disabled-background-color); --system-action-group-gap-size-compact: var(--spectrum-spacing-50); --system-action-group-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); --system-action-group-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); --system-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default); --system-asset-folder-background-color: var(--spectrum-gray-300); --system-asset-file-background-color: var(--spectrum-gray-50); --system-asset-icon-outline-color: var(--spectrum-gray-500); --system-button-background-color-default: var(--spectrum-gray-200); --system-button-background-color-hover: var(--spectrum-gray-300); --system-button-background-color-down: var(--spectrum-gray-400); --system-button-background-color-focus: var(--spectrum-gray-300); --system-button-border-color-default: transparent; --system-button-border-color-hover: transparent; --system-button-border-color-down: transparent; --system-button-border-color-focus: transparent; --system-button-background-color-disabled: transparent; --system-button-border-color-disabled: var(--spectrum-disabled-border-color); --system-button-selected-background-color-default: var(--spectrum-neutral-background-color-default); --system-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover); --system-button-selected-background-color-down: var(--spectrum-neutral-background-color-down); --system-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus); --system-button-primary-content-color-default: var(--spectrum-white); --system-button-primary-content-color-hover: var(--spectrum-white); --system-button-primary-content-color-down: var(--spectrum-white); --system-button-primary-content-color-focus: var(--spectrum-white); --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300); --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300); --system-button-secondary-background-color-default: var(--spectrum-gray-200); --system-button-secondary-background-color-hover: var(--spectrum-gray-300); --system-button-secondary-background-color-down: var(--spectrum-gray-400); --system-button-secondary-background-color-focus: var(--spectrum-gray-300); --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); --system-button-static-white-content-color-default: var(--spectrum-black); --system-button-static-white-content-color-hover: var(--spectrum-black); --system-button-static-white-content-color-down: var(--spectrum-black); --system-button-static-white-content-color-focus: var(--spectrum-black); --system-button-static-white-outline-background-color-default: var(--spectrum-transparent-white-25); --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300); --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400); --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300); --system-button-static-white-outline-content-color-default: var(--spectrum-white); --system-button-static-white-outline-content-color-hover: var(--spectrum-white); --system-button-static-white-outline-content-color-down: var(--spectrum-white); --system-button-static-white-outline-content-color-focus: var(--spectrum-white); --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200); --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300); --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400); --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300); --system-button-static-white-secondary-content-color-default: var(--spectrum-white); --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); --system-button-static-white-secondary-content-color-down: var(--spectrum-white); --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); --system-button-static-white-secondary-outline-background-color-default: var(--spectrum-transparent-white-800); --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); --system-button-static-black-content-color-default: var(--spectrum-white); --system-button-static-black-content-color-hover: var(--spectrum-white); --system-button-static-black-content-color-down: var(--spectrum-white); --system-button-static-black-content-color-focus: var(--spectrum-white); --system-button-static-black-outline-background-color-default: var(--spectrum-transparent-black-25); --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300); --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400); --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300); --system-button-static-black-outline-content-color-default: var(--spectrum-black); --system-button-static-black-outline-content-color-hover: var(--spectrum-black); --system-button-static-black-outline-content-color-down: var(--spectrum-black); --system-button-static-black-outline-content-color-focus: var(--spectrum-black); --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400); --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500); --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600); --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500); --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200); --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300); --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400); --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300); --system-button-static-black-secondary-content-color-default: var(--spectrum-black); --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); --system-button-static-black-secondary-content-color-down: var(--spectrum-black); --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); --system-button-static-black-secondary-outline-background-color-default: var(--spectrum-transparent-black-800); --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); --system-checkbox-control-color-default: var(--spectrum-gray-800); --system-checkbox-control-color-hover: var(--spectrum-gray-900); --system-checkbox-control-color-down: var(--spectrum-gray-900); --system-checkbox-control-color-focus: var(--spectrum-gray-900); --system-checkbox-checkmark-color: var(--spectrum-gray-75); --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); --system-card-border-color: var(--spectrum-gray-200); --system-card-border-color-hover: var(--spectrum-gray-300); --system-card-divider-color: var(--spectrum-gray-300); --system-card-preview-background-color: var(--spectrum-background-base-color); --system-card-preview-background-color-hover: var(--spectrum-gray-300); --system-clear-button-background-color: var(--spectrum-gray-200); --system-clear-button-background-color-hover: var(--spectrum-gray-300); --system-clear-button-background-color-down: var(--spectrum-gray-400); --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); --system-clear-button-height: var(--spectrum-component-height-100); --system-clear-button-width: var(--spectrum-component-height-100); --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --system-clear-button-size-s-height: var(--spectrum-component-height-75); --system-clear-button-size-s-width: var(--spectrum-component-height-75); --system-clear-button-size-l-height: var(--spectrum-component-height-200); --system-clear-button-size-l-width: var(--spectrum-component-height-200); --system-clear-button-size-xl-height: var(--spectrum-component-height-300); --system-clear-button-size-xl-width: var(--spectrum-component-height-300); --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); --system-clear-button-disabled-background-color: transparent; --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-300); --system-close-button-background-color-down: var(--spectrum-gray-400); --system-close-button-background-color-focus: var(--spectrum-gray-300); --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300); --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; --system-coach-indicator-animation-name: pulse; --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); --system-coach-indicator-animation-keyframe-0-scale: 1; --system-coach-indicator-animation-keyframe-0-opacity: 0; --system-coach-indicator-animation-keyframe-50-scale: 1.5; --system-coach-indicator-animation-keyframe-50-opacity: 1; --system-coach-indicator-animation-keyframe-100-scale: 2; --system-coach-indicator-animation-keyframe-100-opacity: 0; --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); --system-coach-indicator-quiet-animation-name: pulse-quiet; --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); --system-coach-mark-width: var(--spectrum-coach-mark-width); --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); --system-coach-mark-header-to-body: var(--spectrum-spacing-200); --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); --system-coach-mark-title-color: var(--spectrum-heading-color); --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); --system-coach-mark-content-font-color: var(--spectrum-body-color); --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); --system-coach-mark-content-line-height: var(--spectrum-body-line-height); --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); --system-coach-mark-step-line-height: var(--spectrum-body-line-height); --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); --system-color-wheel-border-color: var(--spectrum-transparent-black-200); --system-combobox-border-color-default: var(--spectrum-gray-400); --system-combobox-border-color-hover: var(--spectrum-gray-500); --system-combobox-border-color-focus: var(--spectrum-gray-900); --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); --system-combobox-border-color-key-focus: var(--spectrum-gray-900); --system-combobox-readonly-input-border-color: var(--spectrum-gray-400); --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color); --system-combobox-border-color-disabled: transparent; --system-dialog-fullscreen-header-text-size: 28px; --system-dialog-min-inline-size: 288px; --system-dialog-confirm-small-width: 400px; --system-dialog-confirm-medium-width: 480px; --system-dialog-confirm-large-width: 640px; --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-300); --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); --system-divider-background-color-static-black: var(--spectrum-transparent-black-300); --system-drop-zone-border-color: var(--spectrum-gray-300); --system-field-group-margin: var(--spectrum-spacing-300); --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: 0; --system-infield-button-border-color: transparent; --system-infield-button-border-radius: var(--spectrum-corner-radius-75); --system-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); --system-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); --system-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); --system-infield-button-background-color: var(--spectrum-gray-200); --system-infield-button-background-color-hover: var(--spectrum-gray-300); --system-infield-button-background-color-down: var(--spectrum-gray-400); --system-infield-button-background-color-key-focus: var(--spectrum-gray-300); --system-infield-button-disabled-border-color: var(--spectrum-gray-200); --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); --system-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); --system-menu-item-corner-radius: 0; --system-menu-item-focus-indicator-shadow: inset; --system-menu-item-focus-indicator-offset: 0; --system-menu-item-spacing-multiplier: 0; --system-menu-item-focus-indicator-outline-style: none; --system-meter-min-width: var(--spectrum-meter-minimum-width); --system-meter-max-width: var(--spectrum-meter-maximum-width); --system-meter-inline-size: var(--spectrum-progressbar-size-2500); --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); --system-meter-size-s-font-size: var(--spectrum-font-size-75); --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); --system-meter-thickness: var(--spectrum-meter-thickness-large); --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); --system-meter-font-size: var(--spectrum-font-size-100); --system-meter-size-l-font-size: var(--spectrum-font-size-100); --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); --system-modal-background-color: var(--spectrum-gray-100); --system-picker-background-color-default: var(--spectrum-gray-200); --system-picker-background-color-default-open: var(--spectrum-gray-300); --system-picker-background-color-hover: var(--spectrum-gray-300); --system-picker-background-color-hover-open: var(--spectrum-gray-300); --system-picker-background-color-active: var(--spectrum-gray-400); --system-picker-background-color-key-focus: var(--spectrum-gray-300); --system-picker-border-color-default: transparent; --system-picker-border-color-default-open: transparent; --system-picker-border-color-hover: transparent; --system-picker-border-color-hover-open: transparent; --system-picker-border-color-active: transparent; --system-picker-border-color-key-focus: transparent; --system-picker-border-color-disabled: transparent; --system-picker-border-width: 0px; --system-picker-button-background-color: var(--spectrum-gray-200); --system-picker-button-background-color-hover: var(--spectrum-gray-300); --system-picker-button-background-color-down: var(--spectrum-gray-400); --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); --system-picker-button-border-color: none; --system-picker-button-border-radius: var(--spectrum-corner-radius-75); --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); --system-picker-button-border-width: 0px; --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); --system-popover-border-width: 0; --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); --system-progress-bar-fill-size-indeterminate: 70%; --system-progress-bar-size-2400: 192px; --system-progress-bar-size-2500: 200px; --system-progress-bar-size-2800: 224px; --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); --system-progress-bar-line-height: var(--spectrum-line-height-100); --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); --system-progress-bar-track-color: var(--spectrum-gray-300); --system-progress-bar-fill-color: var(--spectrum-accent-color-900); --system-progress-bar-label-and-value-white: var(--spectrum-white); --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300); --system-progress-bar-fill-color-white: var(--spectrum-white); --system-progress-bar-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-font-size: var(--spectrum-font-size-75); --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --system-progress-circle-track-border-color: var(--spectrum-gray-300); --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); --system-radio-button-border-color-default: var(--spectrum-gray-800); --system-radio-button-border-color-hover: var(--spectrum-gray-900); --system-radio-button-border-color-down: var(--spectrum-gray-900); --system-radio-button-border-color-focus: var(--spectrum-gray-900); --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); --system-radio-border-width: var(--spectrum-border-width-200); --system-radio-button-background-color: var(--spectrum-gray-50); --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); --system-radio-line-height: var(--spectrum-line-height-100); --system-radio-animation-duration: var(--spectrum-animation-duration-100); --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); --system-radio-height: var(--spectrum-component-height-100); --system-radio-size-m-height: var(--spectrum-component-height-100); --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); --system-radio-text-to-control: var(--spectrum-text-to-control-100); --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --system-radio-font-size: var(--spectrum-font-size-100); --system-radio-size-m-font-size: var(--spectrum-font-size-100); --system-radio-size-s-height: var(--spectrum-component-height-75); --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); --system-radio-size-s-font-size: var(--spectrum-font-size-75); --system-radio-size-l-height: var(--spectrum-component-height-200); --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); --system-radio-size-l-font-size: var(--spectrum-font-size-200); --system-radio-size-xl-height: var(--spectrum-component-height-300); --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); --system-radio-size-xl-font-size: var(--spectrum-font-size-300); --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); --system-search-border-color-default: var(--spectrum-gray-400); --system-search-border-color-hover: var(--spectrum-gray-500); --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); --system-search-background-color: var(--spectrum-gray-50); --system-search-background-color-disabled: var(--spectrum-disabled-background-color); --system-search-border-color-disabled: var(--spectrum-disabled-background-color); --system-search-border-radius: calc(var(--spectrum-component-height-100) / 2); --system-search-size-m-border-radius: calc(var(--spectrum-component-height-100) / 2); --system-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); --system-search-size-m-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); --system-search-size-s-border-radius: calc(var(--spectrum-component-height-75) / 2); --system-search-size-s-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); --system-search-size-l-border-radius: calc(var(--spectrum-component-height-200) / 2); --system-search-size-l-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); --system-search-size-xl-border-radius: calc(var(--spectrum-component-height-300) / 2); --system-search-size-xl-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); --system-search-quiet-background-color-disabled: transparent; --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); --system-side-nav-background-hover: var(--spectrum-gray-200); --system-side-nav-item-background-down: var(--spectrum-gray-300); --system-side-nav-background-key-focus: var(--spectrum-gray-200); --system-side-nav-item-background-default-selected: var(--spectrum-gray-200); --system-side-nav-background-hover-selected: var(--spectrum-gray-300); --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); --system-slider-track-color: var(--spectrum-gray-200); --system-slider-track-fill-color: var(--spectrum-gray-600); --system-slider-ramp-track-color: var(--spectrum-gray-300); --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); --system-slider-handle-background-color: var(--spectrum-gray-50); --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); --system-slider-handle-border-color: var(--spectrum-gray-800); --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); --system-slider-tick-mark-color: var(--spectrum-gray-200); --system-slider-handle-border-color-hover: var(--spectrum-gray-900); --system-slider-handle-border-color-down: var(--spectrum-gray-900); --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-200); --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200); --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); --system-split-view-background-color: var(--spectrum-gray-100); --system-split-view-handle-background-color: var(--spectrum-gray-300); --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); --system-stepper-border-width: var(--spectrum-border-width-200); --system-stepper-border-color-default: var(--spectrum-gray-400); --system-stepper-border-color-hover: var(--spectrum-gray-500); --system-stepper-border-color-focus: var(--spectrum-gray-800); --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); --system-stepper-buttons-border-style: solid; --system-stepper-buttons-border-width: var(--spectrum-border-width-200); --system-stepper-buttons-border-color: transparent; --system-stepper-buttons-background-color: var(--spectrum-gray-50); --system-stepper-buttons-border-color-hover: transparent; --system-stepper-buttons-border-color-focus: transparent; --system-stepper-buttons-border-color-keyboard-focus: transparent; --system-stepper-button-border-width: 0; --system-stepper-border-color-invalid: transparent; --system-stepper-border-color-focus-invalid: transparent; --system-stepper-border-color-focus-hover-invalid: transparent; --system-stepper-border-color-keyboard-focus-invalid: transparent; --system-stepper-border-color-disabled: var(--spectrum-disabled-background-color); --system-stepper-button-border-width-disabled: 0; --system-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; --system-swatch-border-radius: var(--spectrum-corner-radius-100); --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); --system-swatch-border-thickness: var(--spectrum-border-width-100); --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-swatch-border-color-opacity: 0.51; --system-swatch-border-color-light-opacity: 0.2; --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity)); --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); --system-swatch-disabled-icon-color: var(--spectrum-gray-50); --system-swatch-dash-icon-color: var(--spectrum-gray-800); --system-swatch-slash-icon-color: var(--spectrum-red-900); --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-swatch-size: var(--spectrum-swatch-size-medium); --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); --system-swatch-size-s-size: var(--spectrum-swatch-size-small); --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); --system-swatch-size-l-size: var(--spectrum-swatch-size-large); --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-th