.spectrum-Button { position: relative; display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; overflow: visible; margin: 0; border-style: solid; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-appearance: button; vertical-align: top; transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, border-color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; text-decoration: none; font-family: var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)); line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); user-select: none; -webkit-user-select: none; cursor: pointer; } .spectrum-Button:focus { outline: none; } .spectrum-Button::-moz-focus-inner { border: 0; border-style: none; padding: 0; margin-block-start: -2px; margin-block-end: -2px; } .spectrum-Button:disabled { cursor: default; } .spectrum-Button:after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, margin var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; } .spectrum-Button.focus-ring:after { margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); } a.spectrum-Button { -webkit-appearance: none; -webkit-user-select: none; user-select: none; } .spectrum-Button-label { align-self: center; justify-self: center; text-align: center; } .spectrum-Button-label:empty { display: none; } .spectrum-Button { --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); --spectrum-button-border-radius: var(--spectrum-corner-radius-100); --spectrum-button-border-width: var(--spectrum-border-width-200); --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap)); } .spectrum-Button--sizeS { --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75); --spectrum-button-height: var(--spectrum-component-height-75); --spectrum-button-font-size: var(--spectrum-font-size-75); --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-75); --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-75); } .spectrum-Button--sizeM { --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100); --spectrum-button-height: var(--spectrum-component-height-100); --spectrum-button-font-size: var(--spectrum-font-size-100); --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-100); --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-100); } .spectrum-Button--sizeL { --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200); --spectrum-button-height: var(--spectrum-component-height-200); --spectrum-button-font-size: var(--spectrum-font-size-200); --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-200); --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-200); } .spectrum-Button--sizeXL { --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300); --spectrum-button-height: var(--spectrum-component-height-300); --spectrum-button-font-size: var(--spectrum-font-size-300); --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-300); --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-300); } .spectrum-Button { border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); border-style: solid; block-size: auto; height: var(--mod-button-height, var(--spectrum-button-height)); min-width: var(--mod-button-min-width, var(--spectrum-button-min-width)); min-block-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); position: relative; padding-block-start: 0; padding-block-end: 0; position: relative; min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); min-block-size: var(--mod-spectrum-button-height, var(--spectrum-button-height)); height: var(--mod-button-height, var(--spectrum-button-height)); border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); padding-inline-start: var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)); padding-inline-end: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); color: inherit; } .spectrum-Button:hover, .spectrum-Button:active { box-shadow: none; } .spectrum-Button .spectrum-Icon { inset-inline-end: calc(var(--mod-spectrum-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); inset-block-end: calc(var(--mod-spectrum-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); color: inherit; } .spectrum-Button .spectrum-Icon+.spectrum-Button-label { padding-inline-start: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); padding-inline-end: 0; } .spectrum-Button:after { border-radius: calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); } .spectrum-Button-label { padding-block-start: var(--mod-button-padding-label-top, var(--spectrum-button-padding-label-top)); padding-block-end: var(--mod-button-padding-label-bottom, var(--spectrum-button-padding-label-bottom)); } .spectrum-Button.focus-ring:after, .spectrum-Button.is-focused:after { box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); } .spectrum-Button { transition: border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; } .spectrum-Button:after { position: absolute; inset: 0; margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); border-radius: var(--mod-button-focus-ring-border-radius, var(--spectrum-button-focus-ring-border-radius)); transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; pointer-events: none; content: ''; } .spectrum-Button.focus-ring { box-shadow: none; } .spectrum-Button.focus-ring:after { box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)))); } .spectrum-Button { background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); } .spectrum-Button:hover { background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); } .spectrum-Button.focus-ring { background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); } .spectrum-Button:active { background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); } .spectrum-Button:disabled, .spectrum-Button.is-disabled { background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))); border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))); color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); } @media (forced-colors: active) { .spectrum-Button.focus-ring:after { forced-color-adjust: none; box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) ButtonTExt; } .spectrum-Button.spectrum-Button--accent.spectrum-Button--fill { background-color: ButtonText; color: ButtonFace; } .spectrum-Button.spectrum-Button--accent.spectrum-Button--fill:disabled, .spectrum-Button.spectrum-Button--accent.spectrum-Button--fill.is-disabled { background-color: ButtonFace; color: GrayText; } .spectrum-Button.spectrum-Button--accent.spectrum-Button--fill:active, .spectrum-Button.spectrum-Button--accent.spectrum-Button--fill:hover, .spectrum-Button.spectrum-Button--accent.spectrum-Button--fill.focus-ring, .spectrum-Button.spectrum-Button--accent.spectrum-Button--fill.is-focused { background-color: Highlight; } .spectrum-Button.spectrum-Button--accent.spectrum-Button--fill .spectrum-Button-label { forced-color-adjust: none; } } .spectrum-Button--staticWhite { --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); } .spectrum-Button--staticBlack { --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); } .spectrum { --system-spectrum-button-background-color-default: var(--spectrum-gray-75); --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); --system-spectrum-button-background-color-down: var(--spectrum-gray-300); --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); --system-spectrum-button-border-color-default: var(--spectrum-gray-400); --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); --system-spectrum-button-border-color-down: var(--spectrum-gray-600); --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); --system-spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); --system-spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); --system-spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); --system-spectrum-button-background-color-disabled: transparent; --system-spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); --system-spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-accent-background-color-default: var(--spectrum-accent-background-color-default); --system-spectrum-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); --system-spectrum-button-accent-background-color-down: var(--spectrum-accent-background-color-down); --system-spectrum-button-accent-background-color-focus: var(--spectrum-accent-background-color-key-focus); --system-spectrum-button-accent-border-color-default: transparent; --system-spectrum-button-accent-border-color-hover: transparent; --system-spectrum-button-accent-border-color-down: transparent; --system-spectrum-button-accent-border-color-focus: transparent; --system-spectrum-button-accent-content-color-default: var(--spectrum-white); --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); --system-spectrum-button-accent-content-color-down: var(--spectrum-white); --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); --system-spectrum-button-accent-background-color-disabled: var(--spectrum-disabled-background-color); --system-spectrum-button-accent-border-color-disabled: transparent; --system-spectrum-button-accent-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-accent-outline-background-color-default: transparent; --system-spectrum-button-accent-outline-background-color-hover: var(--spectrum-accent-color-200); --system-spectrum-button-accent-outline-background-color-down: var(--spectrum-accent-color-300); --system-spectrum-button-accent-outline-background-color-focus: var(--spectrum-accent-color-200); --system-spectrum-button-accent-outline-border-color-default: var(--spectrum-accent-color-900); --system-spectrum-button-accent-outline-border-color-hover: var(--spectrum-accent-color-1000); --system-spectrum-button-accent-outline-border-color-down: var(--spectrum-accent-color-1100); --system-spectrum-button-accent-outline-border-color-focus: var(--spectrum-accent-color-1000); --system-spectrum-button-accent-outline-content-color-default: var(--spectrum-accent-content-color-default); --system-spectrum-button-accent-outline-content-color-hover: var(--spectrum-accent-content-color-hover); --system-spectrum-button-accent-outline-content-color-down: var(--spectrum-accent-content-color-down); --system-spectrum-button-accent-outline-content-color-focus: var(--spectrum-accent-content-color-key-focus); --system-spectrum-button-accent-outline-background-color-disabled: transparent; --system-spectrum-button-accent-outline-border-color-disabled: var(--spectrum-disabled-border-color); --system-spectrum-button-accent-outline-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-negative-background-color-default: var(--spectrum-negative-background-color-default); --system-spectrum-button-negative-background-color-hover: var(--spectrum-negative-background-color-hover); --system-spectrum-button-negative-background-color-down: var(--spectrum-negative-background-color-down); --system-spectrum-button-negative-background-color-focus: var(--spectrum-negative-background-color-key-focus); --system-spectrum-button-negative-border-color-default: transparent; --system-spectrum-button-negative-border-color-hover: transparent; --system-spectrum-button-negative-border-color-down: transparent; --system-spectrum-button-negative-border-color-focus: transparent; --system-spectrum-button-negative-content-color-default: var(--spectrum-white); --system-spectrum-button-negative-content-color-hover: var(--spectrum-white); --system-spectrum-button-negative-content-color-down: var(--spectrum-white); --system-spectrum-button-negative-content-color-focus: var(--spectrum-white); --system-spectrum-button-negative-background-color-disabled: var(--spectrum-disabled-background-color); --system-spectrum-button-negative-border-color-disabled: transparent; --system-spectrum-button-negative-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-negative-outline-background-color-default: transparent; --system-spectrum-button-negative-outline-background-color-hover: var(--spectrum-negative-color-200); --system-spectrum-button-negative-outline-background-color-down: var(--spectrum-negative-color-300); --system-spectrum-button-negative-outline-background-color-focus: var(--spectrum-negative-color-200); --system-spectrum-button-negative-outline-border-color-default: var(--spectrum-negative-color-900); --system-spectrum-button-negative-outline-border-color-hover: var(--spectrum-negative-color-1000); --system-spectrum-button-negative-outline-border-color-down: var(--spectrum-negative-color-1100); --system-spectrum-button-negative-outline-border-color-focus: var(--spectrum-negative-color-1000); --system-spectrum-button-negative-outline-content-color-default: var(--spectrum-negative-content-color-default); --system-spectrum-button-negative-outline-content-color-hover: var(--spectrum-negative-content-color-hover); --system-spectrum-button-negative-outline-content-color-down: var(--spectrum-negative-content-color-down); --system-spectrum-button-negative-outline-content-color-focus: var(--spectrum-negative-content-color-key-focus); --system-spectrum-button-negative-outline-background-color-disabled: transparent; --system-spectrum-button-negative-outline-border-color-disabled: var(--spectrum-disabled-border-color); --system-spectrum-button-negative-outline-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-primary-background-color-default: var(--spectrum-neutral-background-color-default); --system-spectrum-button-primary-background-color-hover: var(--spectrum-neutral-background-color-hover); --system-spectrum-button-primary-background-color-down: var(--spectrum-neutral-background-color-down); --system-spectrum-button-primary-background-color-focus: var(--spectrum-neutral-background-color-key-focus); --system-spectrum-button-primary-border-color-default: transparent; --system-spectrum-button-primary-border-color-hover: transparent; --system-spectrum-button-primary-border-color-down: transparent; --system-spectrum-button-primary-border-color-focus: transparent; --system-spectrum-button-primary-content-color-default: var(--spectrum-white); --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); --system-spectrum-button-primary-content-color-down: var(--spectrum-white); --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); --system-spectrum-button-primary-background-color-disabled: var(--spectrum-disabled-background-color); --system-spectrum-button-primary-border-color-disabled: transparent; --system-spectrum-button-primary-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-primary-outline-background-color-default: transparent; --system-spectrum-button-primary-outline-background-color-hover: var(--spectrum-gray-300); --system-spectrum-button-primary-outline-background-color-down: var(--spectrum-gray-400); --system-spectrum-button-primary-outline-background-color-focus: var(--spectrum-gray-300); --system-spectrum-button-primary-outline-border-color-default: var(--spectrum-gray-800); --system-spectrum-button-primary-outline-border-color-hover: var(--spectrum-gray-900); --system-spectrum-button-primary-outline-border-color-down: var(--spectrum-gray-900); --system-spectrum-button-primary-outline-border-color-focus: var(--spectrum-gray-900); --system-spectrum-button-primary-outline-content-color-default: var(--spectrum-neutral-content-color-default); --system-spectrum-button-primary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-spectrum-button-primary-outline-content-color-down: var(--spectrum-neutral-content-color-down); --system-spectrum-button-primary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); --system-spectrum-button-primary-outline-background-color-disabled: transparent; --system-spectrum-button-primary-outline-border-color-disabled: var(--spectrum-disabled-border-color); --system-spectrum-button-primary-outline-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-secondary-background-color-default: var(--spectrum-gray-200); --system-spectrum-button-secondary-background-color-hover: var(--spectrum-gray-300); --system-spectrum-button-secondary-background-color-down: var(--spectrum-gray-400); --system-spectrum-button-secondary-background-color-focus: var(--spectrum-gray-300); --system-spectrum-button-secondary-border-color-default: transparent; --system-spectrum-button-secondary-border-color-hover: transparent; --system-spectrum-button-secondary-border-color-down: transparent; --system-spectrum-button-secondary-border-color-focus: transparent; --system-spectrum-button-secondary-content-color-default: var(--spectrum-neutral-content-color-default); --system-spectrum-button-secondary-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-spectrum-button-secondary-content-color-down: var(--spectrum-neutral-content-color-down); --system-spectrum-button-secondary-content-color-focus: var(--spectrum-neutral-content-color-key-focus); --system-spectrum-button-secondary-background-color-disabled: var(--spectrum-disabled-background-color); --system-spectrum-button-secondary-border-color-disabled: transparent; --system-spectrum-button-secondary-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-secondary-outline-background-color-default: transparent; --system-spectrum-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); --system-spectrum-button-secondary-outline-background-color-down: var(--spectrum-gray-400); --system-spectrum-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); --system-spectrum-button-secondary-outline-border-color-default: var(--spectrum-gray-300); --system-spectrum-button-secondary-outline-border-color-hover: var(--spectrum-gray-400); --system-spectrum-button-secondary-outline-border-color-down: var(--spectrum-gray-500); --system-spectrum-button-secondary-outline-border-color-focus: var(--spectrum-gray-400); --system-spectrum-button-secondary-outline-content-color-default: var(--spectrum-neutral-content-color-default); --system-spectrum-button-secondary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-spectrum-button-secondary-outline-content-color-down: var(--spectrum-neutral-content-color-down); --system-spectrum-button-secondary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); --system-spectrum-button-secondary-outline-background-color-disabled: transparent; --system-spectrum-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); --system-spectrum-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); --system-spectrum-button-quiet-background-color-default: transparent; --system-spectrum-button-quiet-background-color-hover: var(--spectrum-gray-200); --system-spectrum-button-quiet-background-color-down: var(--spectrum-gray-300); --system-spectrum-button-quiet-background-color-focus: var(--spectrum-gray-200); --system-spectrum-button-quiet-border-color-default: transparent; --system-spectrum-button-quiet-border-color-hover: transparent; --system-spectrum-button-quiet-border-color-down: transparent; --system-spectrum-button-quiet-border-color-focus: transparent; --system-spectrum-button-quiet-background-color-disabled: transparent; --system-spectrum-button-quiet-border-color-disabled: transparent; --system-spectrum-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); --system-spectrum-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); --system-spectrum-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); --system-spectrum-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); --system-spectrum-button-selected-border-color-default: transparent; --system-spectrum-button-selected-border-color-hover: transparent; --system-spectrum-button-selected-border-color-down: transparent; --system-spectrum-button-selected-border-color-focus: transparent; --system-spectrum-button-selected-content-color-default: var(--spectrum-white); --system-spectrum-button-selected-content-color-hover: var(--spectrum-white); --system-spectrum-button-selected-content-color-down: var(--spectrum-white); --system-spectrum-button-selected-content-color-focus: var(--spectrum-white); --system-spectrum-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); --system-spectrum-button-selected-border-color-disabled: transparent; --system-spectrum-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); --system-spectrum-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); --system-spectrum-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); --system-spectrum-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); --system-spectrum-button-staticblack-quiet-border-color-default: transparent; --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; --system-spectrum-button-staticblack-quiet-border-color-down: transparent; --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; --system-spectrum-button-staticwhite-background-color-default: var(--spectrum-transparent-white-800); --system-spectrum-button-staticwhite-background-color-hover: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-background-color-down: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-background-color-focus: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-border-color-default: transparent; --system-spectrum-button-staticwhite-border-color-hover: transparent; --system-spectrum-button-staticwhite-border-color-down: transparent; --system-spectrum-button-staticwhite-border-color-focus: transparent; --system-spectrum-button-staticwhite-content-color-default: var(--spectrum-black); --system-spectrum-button-staticwhite-content-color-hover: var(--spectrum-black); --system-spectrum-button-staticwhite-content-color-down: var(--spectrum-black); --system-spectrum-button-staticwhite-content-color-focus: var(--spectrum-black); --system-spectrum-button-staticwhite-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); --system-spectrum-button-staticwhite-background-color-disabled: var(--spectrum-disabled-static-white-background-color); --system-spectrum-button-staticwhite-border-color-disabled: transparent; --system-spectrum-button-staticwhite-content-color-disabled: var(--spectrum-disabled-static-white-content-color); --system-spectrum-button-staticwhite-outline-background-color-default: transparent; --system-spectrum-button-staticwhite-outline-background-color-hover: var(--spectrum-transparent-white-300); --system-spectrum-button-staticwhite-outline-background-color-down: var(--spectrum-transparent-white-400); --system-spectrum-button-staticwhite-outline-background-color-focus: var(--spectrum-transparent-white-300); --system-spectrum-button-staticwhite-outline-border-color-default: var(--spectrum-transparent-white-800); --system-spectrum-button-staticwhite-outline-border-color-hover: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-outline-border-color-down: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-outline-border-color-focus: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-outline-content-color-default: var(--spectrum-white); --system-spectrum-button-staticwhite-outline-content-color-hover: var(--spectrum-white); --system-spectrum-button-staticwhite-outline-content-color-down: var(--spectrum-white); --system-spectrum-button-staticwhite-outline-content-color-focus: var(--spectrum-white); --system-spectrum-button-staticwhite-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; --system-spectrum-button-staticwhite-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); --system-spectrum-button-staticwhite-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); --system-spectrum-button-staticwhite-selected-background-color-default: var(--spectrum-transparent-white-800); --system-spectrum-button-staticwhite-selected-background-color-hover: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-selected-background-color-down: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-selected-background-color-focus: var(--spectrum-transparent-white-900); --system-spectrum-button-staticwhite-selected-content-color-default: var(--spectrum-black); --system-spectrum-button-staticwhite-selected-content-color-hover: var(--spectrum-black); --system-spectrum-button-staticwhite-selected-content-color-down: var(--spectrum-black); --system-spectrum-button-staticwhite-selected-content-color-focus: var(--spectrum-black); --system-spectrum-button-staticwhite-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; --system-spectrum-button-staticwhite-secondary-background-color-default: var(--spectrum-transparent-white-200); --system-spectrum-button-staticwhite-secondary-background-color-hover: var(--spectrum-transparent-white-300); --system-spectrum-button-staticwhite-secondary-background-color-down: var(--spectrum-transparent-white-400); --system-spectrum-button-staticwhite-secondary-background-color-focus: var(--spectrum-transparent-white-300); --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; --system-spectrum-button-staticwhite-secondary-content-color-default: var(--spectrum-white); --system-spectrum-button-staticwhite-secondary-content-color-hover: var(--spectrum-white); --system-spectrum-button-staticwhite-secondary-content-color-down: var(--spectrum-white); --system-spectrum-button-staticwhite-secondary-content-color-focus: var(--spectrum-white); --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); --system-spectrum-button-staticwhite-secondary-background-color-disabled: var(--spectrum-disabled-static-white-background-color); --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; --system-spectrum-button-staticwhite-secondary-content-color-disabled: var(--spectrum-disabled-static-white-content-color); --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var(--spectrum-white); --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var(--spectrum-white); --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var(--spectrum-white); --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var(--spectrum-white); --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); --system-spectrum-button-staticblack-background-color-default: var(--spectrum-transparent-black-800); --system-spectrum-button-staticblack-background-color-hover: var(--spectrum-transparent-black-900); --system-spectrum-button-staticblack-background-color-down: var(--spectrum-transparent-black-900); --system-spectrum-button-staticblack-background-color-focus: var(--spectrum-transparent-black-900); --system-spectrum-button-staticblack-border-color-default: transparent; --system-spectrum-button-staticblack-border-color-hover: transparent; --system-spectrum-button-staticblack-border-color-down: transparent; --system-spectrum-button-staticblack-border-color-focus: transparent; --system-spectrum-button-staticblack-content-color-default: var(--spectrum-white); --system-spectrum-button-staticblack-content-color-hover: var(--spectrum-white); --system-spectrum-button-staticblack-content-color-down: var(--spectrum-white); --system-spectrum-button-staticblack-content-color-focus: var(--spectrum-white); --system-spectrum-button-staticblack-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); --system-spectrum-button-staticblack-background-color-disabled: var(--spectrum-disabled-static-black-background-color); --system-spectrum-button-staticblack-border-color-disabled: transparent; --system-spectrum-button-staticblack-content-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-spectrum-button-staticblack-outline-background-color-default: transparent; --system-spectrum-button-staticblack-outline-background-color-hover: var(--spectrum-transparent-black-300); --system-spectrum-button-staticblack-outline-background-color-down: var(--spectrum-transparent-black-400); --system-spectrum-button-staticblack-outline-background-color-focus: var(--spectrum-transparent-black-300); --system-spectrum-button-staticblack-outline-border-color-default: var(--spectrum-transparent-black-400); --system-spectrum-button-staticblack-outline-border-color-hover: var(--spectrum-transparent-black-500); --system-spectrum-button-staticblack-outline-border-color-down: var(--spectrum-transparent-black-600); --system-spectrum-button-staticblack-outline-border-color-focus: var(--spectrum-transparent-black-500); --system-spectrum-button-staticblack-outline-content-color-default: var(--spectrum-black); --system-spectrum-button-staticblack-outline-content-color-hover: var(--spectrum-black); --system-spectrum-button-staticblack-outline-content-color-down: var(--spectrum-black); --system-spectrum-button-staticblack-outline-content-color-focus: var(--spectrum-black); --system-spectrum-button-staticblack-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; --system-spectrum-button-staticblack-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --system-spectrum-button-staticblack-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-spectrum-button-staticblack-secondary-background-color-default: var(--spectrum-transparent-black-200); --system-spectrum-button-staticblack-secondary-background-color-hover: var(--spectrum-transparent-black-300); --system-spectrum-button-staticblack-secondary-background-color-down: var(--spectrum-transparent-black-400); --system-spectrum-button-staticblack-secondary-background-color-focus: var(--spectrum-transparent-black-300); --system-spectrum-button-staticblack-secondary-border-color-default: transparent; --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; --system-spectrum-button-staticblack-secondary-border-color-down: transparent; --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; --system-spectrum-button-staticblack-secondary-content-color-default: var(--spectrum-black); --system-spectrum-button-staticblack-secondary-content-color-hover: var(--spectrum-black); --system-spectrum-button-staticblack-secondary-content-color-down: var(--spectrum-black); --system-spectrum-button-staticblack-secondary-content-color-focus: var(--spectrum-black); --system-spectrum-button-staticblack-secondary-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); --system-spectrum-button-staticblack-secondary-background-color-disabled: var(--spectrum-disabled-static-black-background-color); --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; --system-spectrum-button-staticblack-secondary-content-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); --system-spectrum-button-staticblack-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); --system-spectrum-button-staticblack-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); --system-spectrum-button-staticblack-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); --system-spectrum-button-staticblack-secondary-outline-content-color-default: var(--spectrum-black); --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var(--spectrum-black); --system-spectrum-button-staticblack-secondary-outline-content-color-down: var(--spectrum-black); --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var(--spectrum-black); --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); } .spectrum--express { --system-spectrum-button-background-color-default: var(--spectrum-gray-200); --system-spectrum-button-background-color-hover: var(--spectrum-gray-300); --system-spectrum-button-background-color-down: var(--spectrum-gray-400); --system-spectrum-button-background-color-focus: var(--spectrum-gray-300); --system-spectrum-button-border-color-default: transparent; --system-spectrum-button-border-color-hover: transparent; --system-spectrum-button-border-color-down: transparent; --system-spectrum-button-border-color-focus: transparent; --system-spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); --system-spectrum-button-border-color-disabled: transparent; --system-spectrum-button-selected-background-color-default: var(--spectrum-neutral-background-color-default); --system-spectrum-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover); --system-spectrum-button-selected-background-color-down: var(--spectrum-neutral-background-color-down); --system-spectrum-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus); } .spectrum-Button { --spectrum-button-background-color-default: var(--system-spectrum-button-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-content-color-disabled); } .spectrum-Button.spectrum-Button--accent { --spectrum-button-background-color-default: var(--system-spectrum-button-accent-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-accent-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-accent-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-accent-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-accent-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-accent-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-accent-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-accent-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-accent-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-accent-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-accent-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-accent-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-accent-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-accent-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-accent-content-color-disabled); } .spectrum-Button.spectrum-Button--accent.spectrum-Button--outline { --spectrum-button-background-color-default: var(--system-spectrum-button-accent-outline-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-accent-outline-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-accent-outline-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-accent-outline-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-accent-outline-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-accent-outline-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-accent-outline-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-accent-outline-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-accent-outline-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-accent-outline-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-accent-outline-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-accent-outline-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-accent-outline-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-accent-outline-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-accent-outline-content-color-disabled); } .spectrum-Button.spectrum-Button--negative { --spectrum-button-background-color-default: var(--system-spectrum-button-negative-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-negative-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-negative-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-negative-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-negative-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-negative-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-negative-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-negative-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-negative-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-negative-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-negative-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-negative-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-negative-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-negative-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-negative-content-color-disabled); } .spectrum-Button.spectrum-Button--negative.spectrum-Button--outline { --spectrum-button-background-color-default: var(--system-spectrum-button-negative-outline-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-negative-outline-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-negative-outline-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-negative-outline-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-negative-outline-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-negative-outline-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-negative-outline-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-negative-outline-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-negative-outline-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-negative-outline-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-negative-outline-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-negative-outline-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-negative-outline-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-negative-outline-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-negative-outline-content-color-disabled); } .spectrum-Button.spectrum-Button--primary { --spectrum-button-background-color-default: var(--system-spectrum-button-primary-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-primary-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-primary-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-primary-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-primary-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-primary-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-primary-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-primary-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-primary-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-primary-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-primary-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-primary-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-primary-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-primary-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-primary-content-color-disabled); } .spectrum-Button.spectrum-Button--primary.spectrum-Button--outline { --spectrum-button-background-color-default: var(--system-spectrum-button-primary-outline-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-primary-outline-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-primary-outline-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-primary-outline-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-primary-outline-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-primary-outline-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-primary-outline-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-primary-outline-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-primary-outline-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-primary-outline-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-primary-outline-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-primary-outline-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-primary-outline-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-primary-outline-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-primary-outline-content-color-disabled); } .spectrum-Button.spectrum-Button--secondary { --spectrum-button-background-color-default: var(--system-spectrum-button-secondary-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-secondary-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-secondary-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-secondary-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-secondary-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-secondary-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-secondary-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-secondary-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-secondary-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-secondary-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-secondary-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-secondary-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-secondary-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-secondary-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-secondary-content-color-disabled); } .spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline { --spectrum-button-background-color-default: var(--system-spectrum-button-secondary-outline-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-secondary-outline-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-secondary-outline-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-secondary-outline-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-secondary-outline-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-secondary-outline-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-secondary-outline-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-secondary-outline-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-secondary-outline-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-secondary-outline-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-secondary-outline-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-secondary-outline-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-secondary-outline-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-secondary-outline-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-secondary-outline-content-color-disabled); } .spectrum-Button.spectrum-Button--quiet { --spectrum-button-background-color-default: var(--system-spectrum-button-quiet-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-quiet-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-quiet-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-quiet-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-quiet-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-quiet-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-quiet-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-quiet-border-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-quiet-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-quiet-border-color-disabled); } .spectrum-Button.is-selected { --spectrum-button-background-color-default: var(--system-spectrum-button-selected-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-selected-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-selected-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-selected-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-selected-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-selected-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-selected-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-selected-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-selected-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-selected-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-selected-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-selected-content-color-focus); --spectrum-button-background-color-disabled: var(--system-spectrum-button-selected-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-selected-border-color-disabled); } .spectrum-Button.is-selected.spectrum-Button--emphasized { --spectrum-button-background-color-default: var(--system-spectrum-button-selected-emphasized-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-selected-emphasized-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-selected-emphasized-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-selected-emphasized-background-color-focus); } .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet { --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-quiet-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-quiet-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-quiet-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-quiet-border-color-focus); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-quiet-border-color-disabled); } .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet { --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-quiet-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-quiet-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-quiet-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-quiet-border-color-focus); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-quiet-border-color-disabled); } .spectrum-Button.spectrum-Button--staticWhite { --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-staticwhite-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-staticwhite-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-staticwhite-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-staticwhite-content-color-focus); --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticwhite-focus-indicator-color); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticwhite-content-color-disabled); } .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline { --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-outline-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-outline-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-outline-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-outline-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-outline-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-outline-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-outline-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-outline-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-staticwhite-outline-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-staticwhite-outline-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-staticwhite-outline-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-staticwhite-outline-content-color-focus); --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticwhite-outline-focus-indicator-color); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-outline-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-outline-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticwhite-outline-content-color-disabled); } .spectrum-Button.spectrum-Button--staticWhite.is-selected { --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-selected-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-selected-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-selected-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-selected-background-color-focus); --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--system-spectrum-button-staticwhite-selected-content-color-default)); --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--system-spectrum-button-staticwhite-selected-content-color-hover)); --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--system-spectrum-button-staticwhite-selected-content-color-down)); --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--system-spectrum-button-staticwhite-selected-content-color-focus)); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-selected-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-selected-border-color-disabled); } .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary { --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-secondary-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-secondary-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-secondary-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-secondary-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-secondary-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-secondary-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-secondary-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-secondary-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-staticwhite-secondary-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-staticwhite-secondary-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-staticwhite-secondary-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-staticwhite-secondary-content-color-focus); --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticwhite-secondary-focus-indicator-color); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-secondary-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-secondary-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticwhite-secondary-content-color-disabled); } .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline { --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-focus); --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-disabled); } .spectrum-Button.spectrum-Button--staticBlack { --spectrum-button-background-color-default: var(--system-spectrum-button-staticblack-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticblack-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticblack-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticblack-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-staticblack-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-staticblack-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-staticblack-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-staticblack-content-color-focus); --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticblack-focus-indicator-color); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticblack-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticblack-content-color-disabled); } .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline { --spectrum-button-background-color-default: var(--system-spectrum-button-staticblack-outline-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticblack-outline-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticblack-outline-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticblack-outline-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-outline-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-outline-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-outline-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-outline-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-staticblack-outline-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-staticblack-outline-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-staticblack-outline-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-staticblack-outline-content-color-focus); --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticblack-outline-focus-indicator-color); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticblack-outline-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-outline-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticblack-outline-content-color-disabled); } .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary { --spectrum-button-background-color-default: var(--system-spectrum-button-staticblack-secondary-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticblack-secondary-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticblack-secondary-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticblack-secondary-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-secondary-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-secondary-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-secondary-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-secondary-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-staticblack-secondary-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-staticblack-secondary-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-staticblack-secondary-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-staticblack-secondary-content-color-focus); --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticblack-secondary-focus-indicator-color); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticblack-secondary-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-secondary-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticblack-secondary-content-color-disabled); } .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline { --spectrum-button-background-color-default: var(--system-spectrum-button-staticblack-secondary-outline-background-color-default); --spectrum-button-background-color-hover: var(--system-spectrum-button-staticblack-secondary-outline-background-color-hover); --spectrum-button-background-color-down: var(--system-spectrum-button-staticblack-secondary-outline-background-color-down); --spectrum-button-background-color-focus: var(--system-spectrum-button-staticblack-secondary-outline-background-color-focus); --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-secondary-outline-border-color-default); --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-secondary-outline-border-color-hover); --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-secondary-outline-border-color-down); --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-secondary-outline-border-color-focus); --spectrum-button-content-color-default: var(--system-spectrum-button-staticblack-secondary-outline-content-color-default); --spectrum-button-content-color-hover: var(--system-spectrum-button-staticblack-secondary-outline-content-color-hover); --spectrum-button-content-color-down: var(--system-spectrum-button-staticblack-secondary-outline-content-color-down); --spectrum-button-content-color-focus: var(--system-spectrum-button-staticblack-secondary-outline-content-color-focus); --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticblack-secondary-outline-focus-indicator-color); --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticblack-secondary-outline-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-secondary-outline-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticblack-secondary-outline-content-color-disabled); }