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

634 lines (633 loc) 34.2 kB
:host, :root { --spectrum-workflow-icon-size-50: 14px; --spectrum-workflow-icon-size-75: 16px; --spectrum-workflow-icon-size-100: 20px; --spectrum-workflow-icon-size-200: 22px; --spectrum-workflow-icon-size-300: 26px; --spectrum-arrow-icon-size-75: 10px; --spectrum-arrow-icon-size-100: 10px; --spectrum-arrow-icon-size-200: 12px; --spectrum-arrow-icon-size-300: 14px; --spectrum-arrow-icon-size-400: 16px; --spectrum-arrow-icon-size-500: 18px; --spectrum-arrow-icon-size-600: 20px; --spectrum-asterisk-icon-size-100: 8px; --spectrum-asterisk-icon-size-200: 10px; --spectrum-asterisk-icon-size-300: 10px; --spectrum-checkmark-icon-size-50: 10px; --spectrum-checkmark-icon-size-75: 10px; --spectrum-checkmark-icon-size-100: 10px; --spectrum-checkmark-icon-size-200: 12px; --spectrum-checkmark-icon-size-300: 14px; --spectrum-checkmark-icon-size-400: 16px; --spectrum-checkmark-icon-size-500: 16px; --spectrum-checkmark-icon-size-600: 18px; --spectrum-chevron-icon-size-50: 6px; --spectrum-chevron-icon-size-75: 10px; --spectrum-chevron-icon-size-100: 10px; --spectrum-chevron-icon-size-200: 12px; --spectrum-chevron-icon-size-300: 14px; --spectrum-chevron-icon-size-400: 16px; --spectrum-chevron-icon-size-500: 16px; --spectrum-chevron-icon-size-600: 18px; --spectrum-corner-triangle-icon-size-75: 5px; --spectrum-corner-triangle-icon-size-100: 5px; --spectrum-corner-triangle-icon-size-200: 6px; --spectrum-corner-triangle-icon-size-300: 7px; --spectrum-cross-icon-size-75: 8px; --spectrum-cross-icon-size-100: 8px; --spectrum-cross-icon-size-200: 10px; --spectrum-cross-icon-size-300: 12px; --spectrum-cross-icon-size-400: 12px; --spectrum-cross-icon-size-500: 14px; --spectrum-cross-icon-size-600: 16px; --spectrum-dash-icon-size-50: 8px; --spectrum-dash-icon-size-75: 8px; --spectrum-dash-icon-size-100: 10px; --spectrum-dash-icon-size-200: 12px; --spectrum-dash-icon-size-300: 12px; --spectrum-dash-icon-size-400: 14px; --spectrum-dash-icon-size-500: 16px; --spectrum-dash-icon-size-600: 18px; --spectrum-checkbox-control-size-small: 12px; --spectrum-checkbox-control-size-medium: 14px; --spectrum-checkbox-control-size-large: 16px; --spectrum-checkbox-control-size-extra-large: 18px; --spectrum-checkbox-top-to-control-small: 6px; --spectrum-checkbox-top-to-control-medium: 9px; --spectrum-checkbox-top-to-control-large: 12px; --spectrum-checkbox-top-to-control-extra-large: 15px; --spectrum-switch-control-width-small: 23px; --spectrum-switch-control-width-medium: 26px; --spectrum-switch-control-width-large: 29px; --spectrum-switch-control-width-extra-large: 33px; --spectrum-switch-control-height-small: 12px; --spectrum-switch-control-height-medium: 14px; --spectrum-switch-control-height-large: 16px; --spectrum-switch-control-height-extra-large: 18px; --spectrum-switch-top-to-control-small: 6px; --spectrum-switch-top-to-control-medium: 9px; --spectrum-switch-top-to-control-large: 12px; --spectrum-switch-top-to-control-extra-large: 15px; --spectrum-radio-button-control-size-small: 12px; --spectrum-radio-button-control-size-medium: 14px; --spectrum-radio-button-control-size-large: 16px; --spectrum-radio-button-control-size-extra-large: 18px; --spectrum-radio-button-top-to-control-small: 6px; --spectrum-radio-button-top-to-control-medium: 9px; --spectrum-radio-button-top-to-control-large: 12px; --spectrum-radio-button-top-to-control-extra-large: 15px; --spectrum-field-label-text-to-asterisk-small: 4px; --spectrum-field-label-text-to-asterisk-medium: 4px; --spectrum-field-label-text-to-asterisk-large: 5px; --spectrum-field-label-text-to-asterisk-extra-large: 5px; --spectrum-field-label-top-to-asterisk-small: 8px; --spectrum-field-label-top-to-asterisk-medium: 12px; --spectrum-field-label-top-to-asterisk-large: 15px; --spectrum-field-label-top-to-asterisk-extra-large: 19px; --spectrum-field-label-top-margin-medium: 4px; --spectrum-field-label-top-margin-large: 5px; --spectrum-field-label-top-margin-extra-large: 5px; --spectrum-field-label-to-component-quiet-small: -8px; --spectrum-field-label-to-component-quiet-medium: -8px; --spectrum-field-label-to-component-quiet-large: -12px; --spectrum-field-label-to-component-quiet-extra-large: -15px; --spectrum-help-text-top-to-workflow-icon-small: 4px; --spectrum-help-text-top-to-workflow-icon-medium: 3px; --spectrum-help-text-top-to-workflow-icon-large: 6px; --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; --spectrum-status-light-dot-size-medium: 8px; --spectrum-status-light-dot-size-large: 10px; --spectrum-status-light-dot-size-extra-large: 10px; --spectrum-status-light-top-to-dot-small: 8px; --spectrum-status-light-top-to-dot-medium: 12px; --spectrum-status-light-top-to-dot-large: 15px; --spectrum-status-light-top-to-dot-extra-large: 19px; --spectrum-action-button-edge-to-hold-icon-medium: 4px; --spectrum-action-button-edge-to-hold-icon-large: 5px; --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; --spectrum-tooltip-tip-width: 8px; --spectrum-tooltip-tip-height: 4px; --spectrum-tooltip-maximum-width: 160px; --spectrum-progress-circle-size-small: 16px; --spectrum-progress-circle-size-medium: 32px; --spectrum-progress-circle-size-large: 64px; --spectrum-progress-circle-thickness-small: 2px; --spectrum-progress-circle-thickness-medium: 3px; --spectrum-progress-circle-thickness-large: 4px; --spectrum-toast-height: 48px; --spectrum-toast-maximum-width: 336px; --spectrum-toast-top-to-workflow-icon: 15px; --spectrum-toast-top-to-text: 14px; --spectrum-toast-bottom-to-text: 17px; --spectrum-action-bar-height: 48px; --spectrum-action-bar-top-to-item-counter: 14px; --spectrum-swatch-size-extra-small: 16px; --spectrum-swatch-size-small: 24px; --spectrum-swatch-size-medium: 32px; --spectrum-swatch-size-large: 40px; --spectrum-progress-bar-thickness-small: 4px; --spectrum-progress-bar-thickness-medium: 6px; --spectrum-progress-bar-thickness-large: 8px; --spectrum-progress-bar-thickness-extra-large: 10px; --spectrum-meter-width: 192px; --spectrum-meter-thickness-small: 4px; --spectrum-meter-thickness-large: 6px; --spectrum-tag-top-to-avatar-small: 4px; --spectrum-tag-top-to-avatar-medium: 6px; --spectrum-tag-top-to-avatar-large: 9px; --spectrum-tag-top-to-cross-icon-small: 8px; --spectrum-tag-top-to-cross-icon-medium: 12px; --spectrum-tag-top-to-cross-icon-large: 15px; --spectrum-popover-top-to-content-area: 4px; --spectrum-menu-item-edge-to-content-not-selected-small: 28px; --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; --spectrum-menu-item-edge-to-content-not-selected-large: 38px; --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; --spectrum-menu-item-top-to-disclosure-icon-small: 7px; --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; --spectrum-menu-item-top-to-disclosure-icon-large: 14px; --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; --spectrum-menu-item-top-to-selected-icon-small: 7px; --spectrum-menu-item-top-to-selected-icon-medium: 11px; --spectrum-menu-item-top-to-selected-icon-large: 14px; --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; --spectrum-slider-control-height-small: 14px; --spectrum-slider-control-height-medium: 16px; --spectrum-slider-control-height-large: 18px; --spectrum-slider-control-height-extra-large: 20px; --spectrum-slider-handle-size-small: 14px; --spectrum-slider-handle-size-medium: 16px; --spectrum-slider-handle-size-large: 18px; --spectrum-slider-handle-size-extra-large: 20px; --spectrum-slider-handle-border-width-down-small: 5px; --spectrum-slider-handle-border-width-down-medium: 6px; --spectrum-slider-handle-border-width-down-large: 7px; --spectrum-slider-handle-border-width-down-extra-large: 8px; --spectrum-slider-bottom-to-handle-small: 5px; --spectrum-slider-bottom-to-handle-medium: 8px; --spectrum-slider-bottom-to-handle-large: 11px; --spectrum-slider-bottom-to-handle-extra-large: 14px; --spectrum-slider-control-to-field-label-small: 5px; --spectrum-slider-control-to-field-label-medium: 8px; --spectrum-slider-control-to-field-label-large: 11px; --spectrum-slider-control-to-field-label-extra-large: 14px; --spectrum-picker-visual-to-disclosure-icon-small: 7px; --spectrum-picker-visual-to-disclosure-icon-medium: 8px; --spectrum-picker-visual-to-disclosure-icon-large: 9px; --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; --spectrum-text-area-minimum-width: 112px; --spectrum-text-area-minimum-height: 56px; --spectrum-combo-box-visual-to-field-button-small: 7px; --spectrum-combo-box-visual-to-field-button-medium: 8px; --spectrum-combo-box-visual-to-field-button-large: 9px; --spectrum-combo-box-visual-to-field-button-extra-large: 10px; --spectrum-thumbnail-size-50: 16px; --spectrum-thumbnail-size-75: 18px; --spectrum-thumbnail-size-100: 20px; --spectrum-thumbnail-size-200: 22px; --spectrum-thumbnail-size-300: 26px; --spectrum-thumbnail-size-400: 28px; --spectrum-thumbnail-size-500: 32px; --spectrum-thumbnail-size-600: 36px; --spectrum-thumbnail-size-700: 40px; --spectrum-thumbnail-size-800: 44px; --spectrum-thumbnail-size-900: 50px; --spectrum-thumbnail-size-1000: 56px; --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); --spectrum-opacity-checkerboard-square-size: 8px; --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); --spectrum-breadcrumbs-height-multiline: 72px; --spectrum-breadcrumbs-top-to-text: 13px; --spectrum-breadcrumbs-top-to-text-compact: 11px; --spectrum-breadcrumbs-top-to-text-multiline: 12px; --spectrum-breadcrumbs-bottom-to-text: 15px; --spectrum-breadcrumbs-bottom-to-text-compact: 12px; --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; --spectrum-breadcrumbs-start-edge-to-text: 8px; --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; --spectrum-breadcrumbs-top-to-separator-icon: 19px; --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; --spectrum-breadcrumbs-top-to-truncated-menu: 8px; --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; --spectrum-avatar-size-50: 16px; --spectrum-avatar-size-75: 18px; --spectrum-avatar-size-100: 20px; --spectrum-avatar-size-200: 22px; --spectrum-avatar-size-300: 26px; --spectrum-avatar-size-400: 28px; --spectrum-avatar-size-500: 32px; --spectrum-avatar-size-600: 36px; --spectrum-avatar-size-700: 40px; --spectrum-alert-banner-minimum-height: 48px; --spectrum-alert-banner-width: 832px; --spectrum-alert-banner-top-to-workflow-icon: 15px; --spectrum-alert-banner-top-to-text: 14px; --spectrum-alert-banner-bottom-to-text: 17px; --spectrum-rating-indicator-width: 18px; --spectrum-rating-indicator-to-icon: 4px; --spectrum-color-area-width: 192px; --spectrum-color-area-minimum-width: 64px; --spectrum-color-area-height: 192px; --spectrum-color-area-minimum-height: 64px; --spectrum-color-wheel-width: 192px; --spectrum-color-wheel-minimum-width: 175px; --spectrum-color-slider-length: 192px; --spectrum-color-slider-minimum-length: 80px; --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); --spectrum-illustrated-message-cjk-title-size: var( --spectrum-heading-cjk-size-m ); --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); --spectrum-coach-mark-width: 296px; --spectrum-coach-mark-minimum-width: 296px; --spectrum-coach-mark-maximum-width: 380px; --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; --spectrum-coach-mark-media-height: 222px; --spectrum-coach-mark-media-minimum-height: 166px; --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); --spectrum-accordion-top-to-text-regular-small: 5px; --spectrum-accordion-small-top-to-text-spacious: 9px; --spectrum-accordion-top-to-text-regular-medium: 8px; --spectrum-accordion-top-to-text-spacious-medium: 12px; --spectrum-accordion-top-to-text-compact-large: 4px; --spectrum-accordion-top-to-text-regular-large: 9px; --spectrum-accordion-top-to-text-spacious-large: 12px; --spectrum-accordion-top-to-text-compact-extra-large: 5px; --spectrum-accordion-top-to-text-regular-extra-large: 9px; --spectrum-accordion-top-to-text-spacious-extra-large: 13px; --spectrum-accordion-bottom-to-text-compact-small: 2px; --spectrum-accordion-bottom-to-text-regular-small: 7px; --spectrum-accordion-bottom-to-text-spacious-small: 11px; --spectrum-accordion-bottom-to-text-compact-medium: 5px; --spectrum-accordion-bottom-to-text-regular-medium: 9px; --spectrum-accordion-bottom-to-text-spacious-medium: 13px; --spectrum-accordion-bottom-to-text-compact-large: 8px; --spectrum-accordion-bottom-to-text-regular-large: 11px; --spectrum-accordion-bottom-to-text-spacious-large: 16px; --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; --spectrum-accordion-minimum-width: 200px; --spectrum-accordion-content-area-top-to-content: 8px; --spectrum-accordion-content-area-bottom-to-content: 16px; --spectrum-color-handle-size: 16px; --spectrum-color-handle-size-key-focus: 32px; --spectrum-table-column-header-row-top-to-text-small: 8px; --spectrum-table-column-header-row-top-to-text-medium: 7px; --spectrum-table-column-header-row-top-to-text-large: 10px; --spectrum-table-column-header-row-top-to-text-extra-large: 13px; --spectrum-table-column-header-row-bottom-to-text-small: 9px; --spectrum-table-column-header-row-bottom-to-text-medium: 8px; --spectrum-table-column-header-row-bottom-to-text-large: 10px; --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; --spectrum-table-row-height-small-regular: 32px; --spectrum-table-row-height-medium-regular: 40px; --spectrum-table-row-height-large-regular: 48px; --spectrum-table-row-height-extra-large-regular: 56px; --spectrum-table-row-height-small-spacious: 40px; --spectrum-table-row-height-medium-spacious: 48px; --spectrum-table-row-height-large-spacious: 56px; --spectrum-table-row-height-extra-large-spacious: 64px; --spectrum-table-row-top-to-text-small-regular: 8px; --spectrum-table-row-top-to-text-medium-regular: 11px; --spectrum-table-row-top-to-text-large-regular: 14px; --spectrum-table-row-top-to-text-extra-large-regular: 17px; --spectrum-table-row-bottom-to-text-small-regular: 9px; --spectrum-table-row-bottom-to-text-medium-regular: 12px; --spectrum-table-row-bottom-to-text-large-regular: 14px; --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; --spectrum-table-row-top-to-text-small-spacious: 12px; --spectrum-table-row-top-to-text-medium-spacious: 15px; --spectrum-table-row-top-to-text-large-spacious: 18px; --spectrum-table-row-top-to-text-extra-large-spacious: 21px; --spectrum-table-row-bottom-to-text-small-spacious: 13px; --spectrum-table-row-bottom-to-text-medium-spacious: 16px; --spectrum-table-row-bottom-to-text-large-spacious: 18px; --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; --spectrum-table-checkbox-to-text: 24px; --spectrum-table-header-row-checkbox-to-top-small: 10px; --spectrum-table-header-row-checkbox-to-top-medium: 9px; --spectrum-table-header-row-checkbox-to-top-large: 12px; --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; --spectrum-table-row-checkbox-to-top-small-compact: 6px; --spectrum-table-row-checkbox-to-top-small-regular: 10px; --spectrum-table-row-checkbox-to-top-small-spacious: 14px; --spectrum-table-row-checkbox-to-top-medium-compact: 9px; --spectrum-table-row-checkbox-to-top-medium-regular: 13px; --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; --spectrum-table-row-checkbox-to-top-large-compact: 12px; --spectrum-table-row-checkbox-to-top-large-regular: 16px; --spectrum-table-row-checkbox-to-top-large-spacious: 20px; --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; --spectrum-table-section-header-row-height-small: 24px; --spectrum-table-section-header-row-height-medium: 32px; --spectrum-table-section-header-row-height-large: 40px; --spectrum-table-section-header-row-height-extra-large: 48px; --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; --spectrum-tab-item-to-tab-item-horizontal-small: 21px; --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; --spectrum-tab-item-to-tab-item-horizontal-large: 27px; --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; --spectrum-tab-item-to-tab-item-vertical-small: 4px; --spectrum-tab-item-to-tab-item-vertical-medium: 4px; --spectrum-tab-item-to-tab-item-vertical-large: 5px; --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; --spectrum-tab-item-start-to-edge-small: 12px; --spectrum-tab-item-start-to-edge-medium: 12px; --spectrum-tab-item-start-to-edge-large: 13px; --spectrum-tab-item-start-to-edge-extra-large: 13px; --spectrum-tab-item-top-to-text-small: 11px; --spectrum-tab-item-bottom-to-text-small: 12px; --spectrum-tab-item-top-to-text-medium: 14px; --spectrum-tab-item-bottom-to-text-medium: 14px; --spectrum-tab-item-top-to-text-large: 16px; --spectrum-tab-item-bottom-to-text-large: 18px; --spectrum-tab-item-top-to-text-extra-large: 19px; --spectrum-tab-item-bottom-to-text-extra-large: 20px; --spectrum-tab-item-top-to-text-compact-small: 4px; --spectrum-tab-item-bottom-to-text-compact-small: 5px; --spectrum-tab-item-top-to-text-compact-medium: 6px; --spectrum-tab-item-bottom-to-text-compact-medium: 8px; --spectrum-tab-item-top-to-text-compact-large: 10px; --spectrum-tab-item-bottom-to-text-compact-large: 12px; --spectrum-tab-item-top-to-text-compact-extra-large: 12px; --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; --spectrum-tab-item-top-to-workflow-icon-small: 13px; --spectrum-tab-item-top-to-workflow-icon-medium: 15px; --spectrum-tab-item-top-to-workflow-icon-large: 17px; --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; --spectrum-tab-item-focus-indicator-gap-small: 7px; --spectrum-tab-item-focus-indicator-gap-medium: 8px; --spectrum-tab-item-focus-indicator-gap-large: 9px; --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; --spectrum-side-navigation-width: 192px; --spectrum-side-navigation-minimum-width: 160px; --spectrum-side-navigation-maximum-width: 240px; --spectrum-side-navigation-second-level-edge-to-text: 24px; --spectrum-side-navigation-third-level-edge-to-text: 36px; --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; --spectrum-side-navigation-item-to-item: 4px; --spectrum-side-navigation-item-to-header: 24px; --spectrum-side-navigation-header-to-item: 8px; --spectrum-side-navigation-bottom-to-text: 8px; --spectrum-tray-top-to-content-area: 4px; --spectrum-accordion-top-to-text-spacious-small: 9px; --spectrum-drop-shadow-y: 1px; --spectrum-drop-shadow-blur: 4px; --spectrum-text-to-visual-50: 5px; --spectrum-text-to-visual-75: 5px; --spectrum-text-to-visual-100: 6px; --spectrum-text-to-visual-200: 7px; --spectrum-text-to-visual-300: 8px; --spectrum-text-to-visual-400: 9px; --spectrum-text-to-control-75: 9px; --spectrum-text-to-control-100: 10px; --spectrum-text-to-control-200: 11px; --spectrum-text-to-control-300: 13px; --spectrum-component-height-50: 20px; --spectrum-component-height-75: 24px; --spectrum-component-height-100: 32px; --spectrum-component-height-200: 40px; --spectrum-component-height-300: 48px; --spectrum-component-height-400: 56px; --spectrum-component-height-500: 64px; --spectrum-component-pill-edge-to-visual-75: 11px; --spectrum-component-pill-edge-to-visual-100: 14px; --spectrum-component-pill-edge-to-visual-200: 18px; --spectrum-component-pill-edge-to-visual-300: 20px; --spectrum-component-pill-edge-to-visual-only-75: 4px; --spectrum-component-pill-edge-to-visual-only-100: 6px; --spectrum-component-pill-edge-to-visual-only-200: 9px; --spectrum-component-pill-edge-to-visual-only-300: 11px; --spectrum-component-pill-edge-to-text-75: 13px; --spectrum-component-pill-edge-to-text-100: 16px; --spectrum-component-pill-edge-to-text-200: 20px; --spectrum-component-pill-edge-to-text-300: 23px; --spectrum-component-edge-to-visual-50: 7px; --spectrum-component-edge-to-visual-75: 8px; --spectrum-component-edge-to-visual-100: 10px; --spectrum-component-edge-to-visual-200: 13px; --spectrum-component-edge-to-visual-300: 14px; --spectrum-component-edge-to-visual-only-50: 3px; --spectrum-component-edge-to-visual-only-75: 4px; --spectrum-component-edge-to-visual-only-100: 6px; --spectrum-component-edge-to-visual-only-200: 9px; --spectrum-component-edge-to-visual-only-300: 11px; --spectrum-component-edge-to-text-50: 8px; --spectrum-component-edge-to-text-75: 10px; --spectrum-component-edge-to-text-100: 12px; --spectrum-component-edge-to-text-200: 15px; --spectrum-component-edge-to-text-300: 17px; --spectrum-component-top-to-workflow-icon-50: 3px; --spectrum-component-top-to-workflow-icon-75: 4px; --spectrum-component-top-to-workflow-icon-100: 6px; --spectrum-component-top-to-workflow-icon-200: 9px; --spectrum-component-top-to-workflow-icon-300: 11px; --spectrum-component-top-to-text-50: 3px; --spectrum-component-top-to-text-75: 4px; --spectrum-component-top-to-text-100: 6px; --spectrum-component-top-to-text-200: 9px; --spectrum-component-top-to-text-300: 12px; --spectrum-component-bottom-to-text-50: 3px; --spectrum-component-bottom-to-text-75: 5px; --spectrum-component-bottom-to-text-100: 9px; --spectrum-component-bottom-to-text-200: 11px; --spectrum-component-bottom-to-text-300: 14px; --spectrum-component-to-menu-small: 6px; --spectrum-component-to-menu-medium: 6px; --spectrum-component-to-menu-large: 7px; --spectrum-component-to-menu-extra-large: 8px; --spectrum-field-edge-to-disclosure-icon-75: 7px; --spectrum-field-edge-to-disclosure-icon-100: 11px; --spectrum-field-edge-to-disclosure-icon-200: 14px; --spectrum-field-edge-to-disclosure-icon-300: 17px; --spectrum-field-end-edge-to-disclosure-icon-75: 7px; --spectrum-field-end-edge-to-disclosure-icon-100: 11px; --spectrum-field-end-edge-to-disclosure-icon-200: 14px; --spectrum-field-end-edge-to-disclosure-icon-300: 17px; --spectrum-field-top-to-disclosure-icon-75: 7px; --spectrum-field-top-to-disclosure-icon-100: 11px; --spectrum-field-top-to-disclosure-icon-200: 14px; --spectrum-field-top-to-disclosure-icon-300: 17px; --spectrum-field-top-to-alert-icon-small: 4px; --spectrum-field-top-to-alert-icon-medium: 7px; --spectrum-field-top-to-alert-icon-large: 10px; --spectrum-field-top-to-alert-icon-extra-large: 13px; --spectrum-field-top-to-validation-icon-small: 7px; --spectrum-field-top-to-validation-icon-medium: 11px; --spectrum-field-top-to-validation-icon-large: 14px; --spectrum-field-top-to-validation-icon-extra-large: 17px; --spectrum-field-top-to-progress-circle-small: 4px; --spectrum-field-top-to-progress-circle-medium: 8px; --spectrum-field-top-to-progress-circle-large: 12px; --spectrum-field-top-to-progress-circle-extra-large: 16px; --spectrum-field-edge-to-alert-icon-small: 9px; --spectrum-field-edge-to-alert-icon-medium: 12px; --spectrum-field-edge-to-alert-icon-large: 15px; --spectrum-field-edge-to-alert-icon-extra-large: 18px; --spectrum-field-edge-to-validation-icon-small: 9px; --spectrum-field-edge-to-validation-icon-medium: 12px; --spectrum-field-edge-to-validation-icon-large: 15px; --spectrum-field-edge-to-validation-icon-extra-large: 18px; --spectrum-field-text-to-alert-icon-small: 8px; --spectrum-field-text-to-alert-icon-medium: 12px; --spectrum-field-text-to-alert-icon-large: 15px; --spectrum-field-text-to-alert-icon-extra-large: 18px; --spectrum-field-text-to-validation-icon-small: 8px; --spectrum-field-text-to-validation-icon-medium: 12px; --spectrum-field-text-to-validation-icon-large: 15px; --spectrum-field-text-to-validation-icon-extra-large: 18px; --spectrum-field-width: 192px; --spectrum-character-count-to-field-quiet-small: -3px; --spectrum-character-count-to-field-quiet-medium: -3px; --spectrum-character-count-to-field-quiet-large: -3px; --spectrum-character-count-to-field-quiet-extra-large: -4px; --spectrum-side-label-character-count-to-field: 12px; --spectrum-side-label-character-count-top-margin-small: 4px; --spectrum-side-label-character-count-top-margin-medium: 8px; --spectrum-side-label-character-count-top-margin-large: 11px; --spectrum-side-label-character-count-top-margin-extra-large: 14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; --spectrum-navigational-indicator-top-to-back-icon-small: 6px; --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; --spectrum-navigational-indicator-top-to-back-icon-large: 12px; --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; --spectrum-color-control-track-width: 24px; --spectrum-font-size-50: 11px; --spectrum-font-size-75: 12px; --spectrum-font-size-100: 14px; --spectrum-font-size-200: 16px; --spectrum-font-size-300: 18px; --spectrum-font-size-400: 20px; --spectrum-font-size-500: 22px; --spectrum-font-size-600: 25px; --spectrum-font-size-700: 28px; --spectrum-font-size-800: 32px; --spectrum-font-size-900: 36px; --spectrum-font-size-1000: 40px; --spectrum-font-size-1100: 45px; --spectrum-font-size-1200: 50px; --spectrum-font-size-1300: 60px; --scale: medium; --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-100 ); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-header-content-font-size: var( --spectrum-heading-size-xs ); --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); --spectrum-button-bottom-to-text-small: 4px; --spectrum-button-bottom-to-text-medium: 8px; --spectrum-button-bottom-to-text-large: 10px; --spectrum-button-bottom-to-text-extra-large: 13px; --spectrum-button-top-to-text-small: 5px; --spectrum-button-top-to-text-medium: 7px; --spectrum-button-top-to-text-large: 10px; --spectrum-button-top-to-text-extra-large: 13px; --spectrum-coach-indicator-gap: 6px; --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); --spectrum-coachmark-buttongroup-display: flex; --spectrum-coachmark-buttongroup-mobile-display: none; --spectrum-coachmark-menu-display: inline-flex; --spectrum-coachmark-menu-mobile-display: none; --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); --spectrum-colorwheel-colorarea-container-size: 144px; --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); --spectrum-datepicker-dash-line-height: 24px; --spectrum-datepicker-datetime-width-first: 36px; --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); --spectrum-datepicker-initial-width: 128px; --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); --spectrum-datepicker-invalid-icon-to-button: 8px; --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; --spectrum-datepicker-width-quiet-first: 72px; --spectrum-datepicker-width-quiet-second: 16px; --spectrum-dial-border-radius: 16px; --spectrum-dial-controls-margin: 8px; --spectrum-dial-handle-block-margin: 16px; --spectrum-dial-handle-inline-margin: 16px; --spectrum-dial-handle-position: 8px; --spectrum-dial-label-container-top-to-text: 4px; --spectrum-dial-label-gap-y: 5px; --spectrum-dialog-confirm-border-radius: 4px; --spectrum-dialog-confirm-description-text-size: 14px; --spectrum-dialog-confirm-entry-animation-distance: 20px; --spectrum-dialog-confirm-hero-height: 128px; --spectrum-dialog-confirm-padding-grid: 40px; --spectrum-dialog-confirm-title-text-size: 18px; --spectrum-menu-item-checkmark-height-small: 10px; --spectrum-menu-item-checkmark-height-medium: 10px; --spectrum-menu-item-checkmark-height-large: 12px; --spectrum-menu-item-checkmark-height-extra-large: 14px; --spectrum-menu-item-checkmark-width-small: 10px; --spectrum-menu-item-checkmark-width-medium: 10px; --spectrum-menu-item-checkmark-width-large: 12px; --spectrum-menu-item-checkmark-width-extra-large: 14px; --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; --spectrum-pagination-item-inline-spacing: 5px; --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); --spectrum-slider-ramp-track-height: 16px; --spectrum-slider-tick-mark-height: 10px; --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-large: 20px; --spectrum-treeview-item-indentation-extra-large: var( --spectrum-spacing-400 ); --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; --spectrum-well-border-radius: var(--spectrum-spacing-75); --spectrum-well-margin-top: var(--spectrum-spacing-75); --spectrum-well-min-width: 240px; --spectrum-well-padding: var(--spectrum-spacing-300); --spectrum-workflow-icon-size-xxl: 32px; --spectrum-workflow-icon-size-xxs: 12px; }