@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
CSS
: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