@spectrum-web-components/styles
Version:
Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library implementing Adobe's Spectrum design system. This package defines the CSS custom properties that implement design tokens from [Spectrum Tok
8 lines (7 loc) • 47 kB
JavaScript
;
import { css } from "@spectrum-web-components/base";
const styles = css`
.spectrum-Button,::slotted(.spectrum-Button){--spectrum-button-sized-height:var(--spectrum-component-height-100);--spectrum-button-sized-font-size:var(--spectrum-font-size-100);--spectrum-button-sized-edge-to-visual:calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width));--spectrum-button-sized-edge-to-visual-only:var(--spectrum-component-pill-edge-to-visual-only-100);--spectrum-button-sized-edge-to-text:calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width));--spectrum-button-sized-padding-label-to-icon:var(--spectrum-text-to-visual-100);--spectrum-button-sized-top-to-text:var(--spectrum-button-top-to-text-medium);--spectrum-button-sized-bottom-to-text:var(--spectrum-button-bottom-to-text-medium);--spectrum-button-sized-top-to-icon:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-button-intended-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-button-content-color-default:var(--spectrum-neutral-content-color-default);--spectrum-button-content-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-button-content-color-down:var(--spectrum-neutral-content-color-down);--spectrum-button-content-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-button-height:var(--mod-button-height,var(--spectrum-button-sized-height));--spectrum-button-min-width:var(--mod-button-min-width,calc(var(--spectrum-button-height)*var(--spectrum-button-minimum-width-multiplier)));--spectrum-button-line-height:var(--mod-button-line-height,1.2);--spectrum-button-font-size:var(--mod-button-font-size,var(--spectrum-button-sized-font-size));--spectrum-button-padding-label-to-icon:var(--mod-button-padding-label-to-icon,var(--spectrum-button-sized-padding-label-to-icon));--spectrum-button-edge-to-visual:var(--mod-button-edge-to-visual,var(--spectrum-button-sized-edge-to-visual));--spectrum-button-edge-to-visual-only:var(--mod-button-edge-to-visual-only,var(--spectrum-button-sized-edge-to-visual-only));--spectrum-button-edge-to-text:var(--mod-button-edge-to-text,var(--spectrum-button-sized-edge-to-text));--spectrum-button-top-to-text:var(--mod-button-top-to-text,var(--spectrum-button-sized-top-to-text));--spectrum-button-bottom-to-text:var(--mod-button-bottom-to-text,var(--spectrum-button-sized-bottom-to-text));--spectrum-button-top-to-icon:var(--mod-button-top-to-icon,var(--spectrum-button-sized-top-to-icon));--spectrum-button-focus-ring-thickness:var(--mod-button-focus-ring-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-button-focus-indicator-color:var(--mod-button-focus-ring-color,var(--spectrum-focus-indicator-color));--spectrum-button-animation-duration:var(--mod-button-animation-duration,var(--spectrum-animation-duration-100));--spectrum-button-border-width:var(--mod-button-border-width,var(--spectrum-border-width-200));--spectrum-button-focus-ring-gap:var(--mod-focus-indicator-gap,var(--mod-button-focus-ring-gap,var(--spectrum-focus-indicator-gap)));--spectrum-button-border-radius:var(--mod-button-border-radius,calc(var(--spectrum-button-height)/2));--spectrum-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-button-background-color-default:var(--system-button-background-color-default);--spectrum-button-background-color-hover:var(--system-button-background-color-hover);--spectrum-button-background-color-down:var(--system-button-background-color-down);--spectrum-button-background-color-focus:var(--system-button-background-color-focus);--spectrum-button-border-color-default:var(--system-button-border-color-default);--spectrum-button-border-color-hover:var(--system-button-border-color-hover);--spectrum-button-border-color-down:var(--system-button-border-color-down);--spectrum-button-border-color-focus:var(--system-button-border-color-focus);--spectrum-button-background-color-disabled:var(--system-button-background-color-disabled);--spectrum-button-border-color-disabled:var(--system-button-border-color-disabled);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;gap:var(--spectrum-button-padding-label-to-icon);min-inline-size:var(--spectrum-button-min-width);max-inline-size:var(--mod-button-max-inline-size,none);min-block-size:var(--spectrum-button-height);padding-block:0;padding-block-start:calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width));padding-block-end:calc(var(--spectrum-button-bottom-to-text) - var(--spectrum-button-border-width));padding-inline:var(--spectrum-button-edge-to-text);margin:0;margin-block:var(--mod-button-margin-block);font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));font-size:var(--spectrum-button-font-size);font-weight:var(--mod-bold-font-weight,var(--spectrum-bold-font-weight));line-height:var(--spectrum-button-line-height);vertical-align:top;color:var(--highcontrast-button-content-color-default,var(--mod-button-content-color-default,var(--spectrum-button-content-color-default,inherit)));text-align:var(--mod-button-text-align,center);text-transform:none;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)));border-style:solid;border-width:var(--spectrum-button-border-width);border-radius:var(--spectrum-button-border-radius);appearance:auto;cursor:pointer;user-select:none;transition:outline var(--spectrum-button-animation-duration,.13s)linear,border var(--spectrum-button-animation-duration,.13s)linear,color var(--spectrum-button-animation-duration,.13s)linear,background-color var(--spectrum-button-animation-duration,.13s)linear;justify-content:center;align-self:start;align-items:center;margin-inline-start:var(--mod-button-margin-left);margin-inline-end:var(--mod-button-margin-right);text-decoration:none;display:inline-flex;position:relative;overflow:visible}.spectrum-Button:focus-visible,::slotted(.spectrum-Button:focus-visible){color:var(--highcontrast-button-content-color-focus,var(--mod-button-content-color-focus,var(--spectrum-button-content-color-focus)));background-color:var(--highcontrast-button-background-color-focus,var(--mod-button-background-color-focus,var(--spectrum-button-background-color-focus)));outline:var(--spectrum-button-focus-ring-thickness)solid var(--spectrum-button-focus-indicator-color);outline-offset:var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))}.spectrum-Button:active,::slotted(.spectrum-Button:active){color:var(--highcontrast-button-content-color-down,var(--mod-button-content-color-down,var(--spectrum-button-content-color-down)));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)));box-shadow:none}@media (hover:hover){.spectrum-Button:hover,::slotted(.spectrum-Button:hover){color:var(--highcontrast-button-content-color-hover,var(--mod-button-content-color-hover,var(--spectrum-button-content-color-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)));box-shadow:none}}.spectrum-Button--iconOnly,::slotted(.spectrum-Button--iconOnly){min-inline-size:unset;padding:calc(var(--spectrum-button-edge-to-visual-only) - var(--spectrum-button-border-width));border-radius:50%}.spectrum-Button :is([slot=icon],svg,img){--spectrum-icon-size:inherit;inline-size:var(--spectrum-icon-size,var(--spectrum-workflow-icon-size-100));block-size:var(--spectrum-icon-size,var(--spectrum-workflow-icon-size-100));color:inherit;fill:currentColor;flex-shrink:0;align-self:flex-start}.spectrum-Button:not(.spectrum-Button--iconOnly) :is([slot=icon],svg,img){margin-block:calc((var(--spectrum-icon-block-size) - 1lh)/2*-1);margin-inline-start:calc(var(--mod-button-edge-to-visual,var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text,var(--spectrum-button-edge-to-text)))}.spectrum-Button--sizeS,::slotted(.spectrum-Button--sizeS){--spectrum-button-sized-height:var(--spectrum-component-height-75);--spectrum-button-sized-font-size:var(--spectrum-font-size-75);--spectrum-button-sized-edge-to-visual:calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width));--spectrum-button-sized-edge-to-visual-only:var(--spectrum-component-pill-edge-to-visual-only-75);--spectrum-button-sized-edge-to-text:calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width));--spectrum-button-sized-padding-label-to-icon:var(--spectrum-text-to-visual-75);--spectrum-button-sized-top-to-text:var(--spectrum-button-top-to-text-small);--spectrum-button-sized-bottom-to-text:var(--spectrum-button-bottom-to-text-small);--spectrum-button-sized-top-to-icon:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-button-intended-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}.spectrum-Button--sizeL,::slotted(.spectrum-Button--sizeL){--spectrum-button-sized-height:var(--spectrum-component-height-200);--spectrum-button-sized-font-size:var(--spectrum-font-size-200);--spectrum-button-sized-edge-to-visual:calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width));--spectrum-button-sized-edge-to-visual-only:var(--spectrum-component-pill-edge-to-visual-only-200);--spectrum-button-sized-edge-to-text:calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width));--spectrum-button-sized-padding-label-to-icon:var(--spectrum-text-to-visual-200);--spectrum-button-sized-top-to-text:var(--spectrum-button-top-to-text-large);--spectrum-button-sized-bottom-to-text:var(--spectrum-button-bottom-to-text-large);--spectrum-button-sized-top-to-icon:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-button-intended-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}.spectrum-Button--sizeXL,::slotted(.spectrum-Button--sizeXL){--spectrum-button-sized-height:var(--spectrum-component-height-300);--spectrum-button-sized-font-size:var(--spectrum-font-size-300);--spectrum-button-sized-edge-to-visual:calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width));--spectrum-button-sized-edge-to-visual-only:var(--spectrum-component-pill-edge-to-visual-only-300);--spectrum-button-sized-edge-to-text:calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width));--spectrum-button-sized-padding-label-to-icon:var(--spectrum-text-to-visual-300);--spectrum-button-sized-top-to-text:var(--spectrum-button-top-to-text-extra-large);--spectrum-button-sized-bottom-to-text:var(--spectrum-button-bottom-to-text-extra-large);--spectrum-button-sized-top-to-icon:var(--spectrum-component-top-to-workflow-icon-300);--spectrum-button-intended-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}.spectrum-Button--accent,::slotted(.spectrum-Button--accent){--spectrum-button-background-color-default:var(--spectrum-accent-background-color-default);--spectrum-button-background-color-hover:var(--spectrum-accent-background-color-hover);--spectrum-button-background-color-down:var(--spectrum-accent-background-color-down);--spectrum-button-background-color-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-button-border-color-default:transparent;--spectrum-button-border-color-hover:transparent;--spectrum-button-border-color-down:transparent;--spectrum-button-border-color-focus:transparent;--spectrum-button-content-color-default:var(--spectrum-white);--spectrum-button-content-color-hover:var(--spectrum-white);--spectrum-button-content-color-down:var(--spectrum-white);--spectrum-button-content-color-focus:var(--spectrum-white)}.spectrum-Button--accent.spectrum-Button--outline,::slotted(.spectrum-Button--accent.spectrum-Button--outline){--spectrum-button-background-color-hover:var(--spectrum-accent-color-200);--spectrum-button-background-color-down:var(--spectrum-accent-color-300);--spectrum-button-background-color-focus:var(--spectrum-accent-color-200);--spectrum-button-border-color-default:var(--spectrum-accent-color-900);--spectrum-button-border-color-hover:var(--spectrum-accent-color-1000);--spectrum-button-border-color-down:var(--spectrum-accent-color-1100);--spectrum-button-border-color-focus:var(--spectrum-accent-color-1000);--spectrum-button-content-color-default:var(--spectrum-accent-content-color-default);--spectrum-button-content-color-hover:var(--spectrum-accent-content-color-hover);--spectrum-button-content-color-down:var(--spectrum-accent-content-color-down);--spectrum-button-content-color-focus:var(--spectrum-accent-content-color-key-focus)}.spectrum-Button--negative,::slotted(.spectrum-Button--negative){--spectrum-button-background-color-default:var(--spectrum-negative-background-color-default);--spectrum-button-background-color-hover:var(--spectrum-negative-background-color-hover);--spectrum-button-background-color-down:var(--spectrum-negative-background-color-down);--spectrum-button-background-color-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-button-border-color-default:transparent;--spectrum-button-border-color-hover:transparent;--spectrum-button-border-color-down:transparent;--spectrum-button-border-color-focus:transparent;--spectrum-button-content-color-default:var(--spectrum-white);--spectrum-button-content-color-hover:var(--spectrum-white);--spectrum-button-content-color-down:var(--spectrum-white);--spectrum-button-content-color-focus:var(--spectrum-white)}.spectrum-Button--negative.spectrum-Button--outline,::slotted(.spectrum-Button--negative.spectrum-Button--outline){--spectrum-button-background-color-hover:var(--spectrum-negative-color-200);--spectrum-button-background-color-down:var(--spectrum-negative-color-300);--spectrum-button-background-color-focus:var(--spectrum-negative-color-200);--spectrum-button-border-color-default:var(--spectrum-negative-color-900);--spectrum-button-border-color-hover:var(--spectrum-negative-color-1000);--spectrum-button-border-color-down:var(--spectrum-negative-color-1100);--spectrum-button-border-color-focus:var(--spectrum-negative-color-1000);--spectrum-button-content-color-default:var(--spectrum-negative-content-color-default);--spectrum-button-content-color-hover:var(--spectrum-negative-content-color-hover);--spectrum-button-content-color-down:var(--spectrum-negative-content-color-down);--spectrum-button-content-color-focus:var(--spectrum-negative-content-color-key-focus)}.spectrum-Button--primary,::slotted(.spectrum-Button--primary){--spectrum-button-background-color-default:var(--spectrum-neutral-background-color-default);--spectrum-button-background-color-hover:var(--spectrum-neutral-background-color-hover);--spectrum-button-background-color-down:var(--spectrum-neutral-background-color-down);--spectrum-button-background-color-focus:var(--spectrum-neutral-background-color-key-focus);--spectrum-button-border-color-default:transparent;--spectrum-button-border-color-hover:transparent;--spectrum-button-border-color-down:transparent;--spectrum-button-border-color-focus:transparent;--spectrum-button-content-color-default:var(--system-button-primary-content-color-default);--spectrum-button-content-color-hover:var(--system-button-primary-content-color-hover);--spectrum-button-content-color-down:var(--system-button-primary-content-color-down);--spectrum-button-content-color-focus:var(--system-button-primary-content-color-focus)}.spectrum-Button--primary.spectrum-Button--outline,::slotted(.spectrum-Button--primary.spectrum-Button--outline){--spectrum-button-border-color-default:var(--spectrum-gray-800);--spectrum-button-border-color-hover:var(--spectrum-gray-900);--spectrum-button-border-color-down:var(--spectrum-gray-900);--spectrum-button-border-color-focus:var(--spectrum-gray-900);--spectrum-button-content-color-default:var(--spectrum-neutral-content-color-default);--spectrum-button-content-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-button-content-color-down:var(--spectrum-neutral-content-color-down);--spectrum-button-content-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-button-background-color-hover:var(--system-button-primary-outline-background-color-hover);--spectrum-button-background-color-down:var(--system-button-primary-outline-background-color-down);--spectrum-button-background-color-focus:var(--system-button-primary-outline-background-color-focus)}.spectrum-Button--secondary,::slotted(.spectrum-Button--secondary){--spectrum-button-border-color-default:transparent;--spectrum-button-border-color-hover:transparent;--spectrum-button-border-color-down:transparent;--spectrum-button-border-color-focus:transparent;--spectrum-button-content-color-default:var(--spectrum-neutral-content-color-default);--spectrum-button-content-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-button-content-color-down:var(--spectrum-neutral-content-color-down);--spectrum-button-content-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-button-background-color-default:var(--system-button-secondary-background-color-default);--spectrum-button-background-color-hover:var(--system-button-secondary-background-color-hover);--spectrum-button-background-color-down:var(--system-button-secondary-background-color-down);--spectrum-button-background-color-focus:var(--system-button-secondary-background-color-focus)}.spectrum-Button--secondary.spectrum-Button--outline,::slotted(.spectrum-Button--secondary.spectrum-Button--outline){--spectrum-button-border-color-hover:var(--spectrum-gray-400);--spectrum-button-border-color-focus:var(--spectrum-gray-400);--spectrum-button-content-color-default:var(--spectrum-neutral-content-color-default);--spectrum-button-content-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-button-content-color-down:var(--spectrum-neutral-content-color-down);--spectrum-button-content-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-button-background-color-hover:var(--system-button-secondary-outline-background-color-hover);--spectrum-button-background-color-down:var(--system-button-secondary-outline-background-color-down);--spectrum-button-background-color-focus:var(--system-button-secondary-outline-background-color-focus);--spectrum-button-border-color-default:var(--system-button-secondary-outline-border-color-default);--spectrum-button-border-color-down:var(--system-button-secondary-outline-border-color-down)}.spectrum-Button--outline,::slotted(.spectrum-Button--outline),.spectrum-Button--quiet,::slotted(.spectrum-Button--quiet){--spectrum-button-background-color-default:transparent}.spectrum-Button--quiet,::slotted(.spectrum-Button--quiet){--spectrum-button-background-color-hover:var(--spectrum-gray-200);--spectrum-button-background-color-down:var(--spectrum-gray-300);--spectrum-button-background-color-focus:var(--spectrum-gray-200)}.spectrum-Button--staticWhite,::slotted(.spectrum-Button--staticWhite){--spectrum-button-focus-indicator-color:var(--spectrum-static-white-focus-indicator-color);--spectrum-button-background-color-default:var(--system-button-static-white-background-color-default);--spectrum-button-background-color-hover:var(--system-button-static-white-background-color-hover);--spectrum-button-background-color-down:var(--system-button-static-white-background-color-down);--spectrum-button-background-color-focus:var(--system-button-static-white-background-color-focus);--spectrum-button-content-color-default:var(--system-button-static-white-content-color-default);--spectrum-button-content-color-hover:var(--system-button-static-white-content-color-hover);--spectrum-button-content-color-down:var(--system-button-static-white-content-color-down);--spectrum-button-content-color-focus:var(--system-button-static-white-content-color-focus)}.spectrum-Button--staticWhite.spectrum-Button--outline,::slotted(.spectrum-Button--staticWhite.spectrum-Button--outline){--spectrum-button-background-color-default:var(--system-button-static-white-outline-background-color-default);--spectrum-button-background-color-hover:var(--system-button-static-white-outline-background-color-hover);--spectrum-button-background-color-down:var(--system-button-static-white-outline-background-color-down);--spectrum-button-background-color-focus:var(--system-button-static-white-outline-background-color-focus);--spectrum-button-content-color-default:var(--system-button-static-white-outline-content-color-default);--spectrum-button-content-color-hover:var(--system-button-static-white-outline-content-color-hover);--spectrum-button-content-color-down:var(--system-button-static-white-outline-content-color-down);--spectrum-button-content-color-focus:var(--system-button-static-white-outline-content-color-focus);--spectrum-button-border-color-default:var(--system-button-static-white-outline-border-color-default);--spectrum-button-border-color-hover:var(--system-button-static-white-outline-border-color-hover);--spectrum-button-border-color-down:var(--system-button-static-white-outline-border-color-down);--spectrum-button-border-color-focus:var(--system-button-static-white-outline-border-color-focus)}.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline,::slotted(.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline){--spectrum-button-border-color-default:var(--system-button-static-white-secondary-outline-border-color-default);--spectrum-button-border-color-hover:var(--system-button-static-white-secondary-outline-border-color-hover);--spectrum-button-border-color-down:var(--system-button-static-white-secondary-outline-border-color-down);--spectrum-button-border-color-focus:var(--system-button-static-white-secondary-outline-border-color-focus);--spectrum-button-background-color-default:transparent;--spectrum-button-background-color-hover:var(--system-button-static-white-secondary-outline-background-color-hover);--spectrum-button-background-color-down:var(--system-button-static-white-secondary-outline-background-color-down);--spectrum-button-background-color-focus:var(--system-button-static-white-secondary-outline-background-color-focus)}.spectrum-Button--staticBlack,::slotted(.spectrum-Button--staticBlack){--spectrum-button-focus-indicator-color:var(--mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color));--spectrum-button-background-color-default:var(--system-button-static-black-background-color-default);--spectrum-button-background-color-hover:var(--system-button-static-black-background-color-hover);--spectrum-button-background-color-down:var(--system-button-static-black-background-color-down);--spectrum-button-background-color-focus:var(--system-button-static-black-background-color-focus);--spectrum-button-content-color-default:var(--system-button-static-black-content-color-default);--spectrum-button-content-color-hover:var(--system-button-static-black-content-color-hover);--spectrum-button-content-color-down:var(--system-button-static-black-content-color-down);--spectrum-button-content-color-focus:var(--system-button-static-black-content-color-focus)}.spectrum-Button--staticBlack.spectrum-Button--outline,::slotted(.spectrum-Button--staticBlack.spectrum-Button--outline){--spectrum-button-background-color-default:var(--system-button-static-black-outline-background-color-default);--spectrum-button-background-color-hover:var(--system-button-static-black-outline-background-color-hover);--spectrum-button-background-color-down:var(--system-button-static-black-outline-background-color-down);--spectrum-button-background-color-focus:var(--system-button-static-black-outline-background-color-focus);--spectrum-button-content-color-default:var(--system-button-static-black-outline-content-color-default);--spectrum-button-content-color-hover:var(--system-button-static-black-outline-content-color-hover);--spectrum-button-content-color-down:var(--system-button-static-black-outline-content-color-down);--spectrum-button-content-color-focus:var(--system-button-static-black-outline-content-color-focus);--spectrum-button-border-color-default:var(--system-button-static-black-outline-border-color-default);--spectrum-button-border-color-hover:var(--system-button-static-black-outline-border-color-hover);--spectrum-button-border-color-down:var(--system-button-static-black-outline-border-color-down);--spectrum-button-border-color-focus:var(--system-button-static-black-outline-border-color-focus)}.spectrum-Button--staticBlack.spectrum-Button--secondary,::slotted(.spectrum-Button--staticBlack.spectrum-Button--secondary){--spectrum-button-background-color-default:var(--system-button-static-black-secondary-background-color-default);--spectrum-button-background-color-hover:var(--system-button-static-black-secondary-background-color-hover);--spectrum-button-background-color-down:var(--system-button-static-black-secondary-background-color-down);--spectrum-button-background-color-focus:var(--system-button-static-black-secondary-background-color-focus);--spectrum-button-content-color-default:var(--system-button-static-black-secondary-content-color-default);--spectrum-button-content-color-hover:var(--system-button-static-black-secondary-content-color-hover);--spectrum-button-content-color-down:var(--system-button-static-black-secondary-content-color-down);--spectrum-button-content-color-focus:var(--system-button-static-black-secondary-content-color-focus)}.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline,::slotted(.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline){--spectrum-button-border-color-default:var(--system-button-static-black-secondary-outline-border-color-default);--spectrum-button-border-color-hover:var(--system-button-static-black-secondary-outline-border-color-hover);--spectrum-button-border-color-down:var(--system-button-static-black-secondary-outline-border-color-down);--spectrum-button-border-color-focus:var(--system-button-static-black-secondary-outline-border-color-focus);--spectrum-button-background-color-default:transparent;--spectrum-button-background-color-hover:var(--system-button-static-black-secondary-outline-background-color-hover);--spectrum-button-background-color-down:var(--system-button-static-black-secondary-outline-background-color-down);--spectrum-button-background-color-focus:var(--system-button-static-black-secondary-outline-background-color-focus)}.spectrum-Button--quiet,::slotted(.spectrum-Button--quiet),.spectrum-Button--staticWhite,::slotted(.spectrum-Button--staticWhite),.spectrum-Button--staticBlack,::slotted(.spectrum-Button--staticBlack),.spectrum-Button--staticWhite.spectrum-Button--secondary,::slotted(.spectrum-Button--staticWhite.spectrum-Button--secondary),.spectrum-Button--staticBlack.spectrum-Button--secondary,::slotted(.spectrum-Button--staticBlack.spectrum-Button--secondary),.spectrum-Button--staticWhite.spectrum-Button--quiet,::slotted(.spectrum-Button--staticWhite.spectrum-Button--quiet),.spectrum-Button--staticBlack.spectrum-Button--quiet,::slotted(.spectrum-Button--staticBlack.spectrum-Button--quiet){--spectrum-button-border-color-default:transparent;--spectrum-button-border-color-hover:transparent;--spectrum-button-border-color-down:transparent;--spectrum-button-border-color-focus:transparent}.spectrum-ActionButton,::slotted(.spectrum-ActionButton){--spectrum-actionbutton-background-color-default:var(--system-action-button-background-color-default);--spectrum-actionbutton-background-color-hover:var(--system-action-button-background-color-hover);--spectrum-actionbutton-background-color-down:var(--system-action-button-background-color-down);--spectrum-actionbutton-background-color-focus:var(--system-action-button-background-color-focus);--spectrum-actionbutton-border-color-default:var(--system-action-button-border-color-default);--spectrum-actionbutton-border-color-hover:var(--system-action-button-border-color-hover);--spectrum-actionbutton-border-color-down:var(--system-action-button-border-color-down);--spectrum-actionbutton-border-color-focus:var(--system-action-button-border-color-focus);--spectrum-actionbutton-border-radius-default:var(--system-action-button-size-m-border-radius-default);--spectrum-actionbutton-background-color:var(--highcontrast-actionbutton-background-color,var(--mod-actionbutton-background-color-default,var(--spectrum-actionbutton-background-color-default)));--spectrum-actionbutton-border-color:var(--highcontrast-actionbutton-border-color,var(--mod-actionbutton-border-color-default,var(--spectrum-actionbutton-border-color-default)));--spectrum-actionbutton-content-color:var(--highcontrast-actionbutton-content-color,var(--mod-actionbutton-content-color-default,var(--spectrum-neutral-content-color-default)));--spectrum-actionbutton-border-radius:var(--mod-actionbutton-border-radius,var(--spectrum-actionbutton-border-radius-default));--spectrum-actionbutton-border-width:var(--mod-actionbutton-border-width,var(--spectrum-border-width-100));--spectrum-actionbutton-focus-indicator-gap:var(--mod-actionbutton-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-actionbutton-focus-indicator-thickness:var(--mod-actionbutton-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-actionbutton-focus-indicator-color:var(--highcontrast-actionbutton-focus-indicator-color,var(--mod-actionbutton-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-actionbutton-sized-height:var(--spectrum-component-height-100);--spectrum-actionbutton-sized-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-actionbutton-sized-font-size:var(--spectrum-font-size-100);--spectrum-actionbutton-sized-text-to-visual:var(--spectrum-text-to-visual-100);--spectrum-actionbutton-sized-edge-to-visual:var(--spectrum-component-edge-to-visual-100);--spectrum-actionbutton-sized-edge-to-text:var(--spectrum-component-edge-to-text-100);--spectrum-actionbutton-sized-edge-to-visual-only:var(--spectrum-component-edge-to-visual-only-100);--spectrum-actionbutton-height:var(--mod-actionbutton-height,var(--spectrum-actionbutton-sized-height));--spectrum-actionbutton-icon-size:var(--mod-actionbutton-icon-size,var(--spectrum-actionbutton-sized-icon-size));--spectrum-actionbutton-font-size:var(--mod-actionbutton-font-size,var(--spectrum-actionbutton-sized-font-size));--spectrum-actionbutton-text-to-visual:var(--mod-actionbutton-text-to-visual,var(--spectrum-actionbutton-sized-text-to-visual));--spectrum-actionbutton-edge-to-visual:var(--mod-actionbutton-edge-to-visual,calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width)));--spectrum-actionbutton-edge-to-text:var(--mod-actionbutton-edge-to-text,calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width)));--spectrum-actionbutton-edge-to-visual-only:var(--mod-actionbutton-edge-to-visual-only,calc(var(--spectrum-actionbutton-sized-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;gap:calc(var(--spectrum-actionbutton-text-to-visual) + var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only));min-inline-size:var(--mod-actionbutton-min-width,calc(var(--mod-actionbutton-edge-to-visual-only,var(--spectrum-actionbutton-sized-edge-to-visual-only))*2 + var(--spectrum-actionbutton-icon-size)));block-size:var(--spectrum-actionbutton-height);padding-inline:var(--spectrum-actionbutton-edge-to-text);font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));font-size:var(--spectrum-actionbutton-font-size);line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));vertical-align:top;color:var(--spectrum-actionbutton-content-color);text-transform:none;background-color:var(--spectrum-actionbutton-background-color);border-color:var(--spectrum-actionbutton-border-color);border-style:solid;border-width:var(--spectrum-actionbutton-border-width);border-radius:var(--spectrum-actionbutton-border-radius);-webkit-appearance:button;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}.spectrum-ActionButton--sizeXS,::slotted(.spectrum-ActionButton--sizeXS){--spectrum-actionbutton-sized-height:var(--spectrum-component-height-50);--spectrum-actionbutton-sized-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-sized-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-sized-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-sized-edge-to-visual:var(--spectrum-component-edge-to-visual-50);--spectrum-actionbutton-sized-edge-to-text:var(--spectrum-component-edge-to-text-50);--spectrum-actionbutton-sized-edge-to-visual-only:var(--spectrum-component-edge-to-visual-only-50);--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-border-radius-default:var(--system-action-button-size-xs-border-radius-default);min-width:var(--spectrum-actionbutton-height,0)}.spectrum-ActionButton--sizeS,::slotted(.spectrum-ActionButton--sizeS){--spectrum-actionbutton-sized-height:var(--spectrum-component-height-75);--spectrum-actionbutton-sized-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-sized-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-sized-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-sized-edge-to-visual:var(--spectrum-component-edge-to-visual-75);--spectrum-actionbutton-sized-edge-to-text:var(--spectrum-component-edge-to-text-75);--spectrum-actionbutton-sized-edge-to-visual-only:var(--spectrum-component-edge-to-visual-only-75);--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-border-radius-default:var(--system-action-button-size-s-border-radius-default)}.spectrum-ActionButton--sizeM,::slotted(.spectrum-ActionButton--sizeM){--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width))}.spectrum-ActionButton--sizeL,::slotted(.spectrum-ActionButton--sizeL){--spectrum-actionbutton-sized-height:var(--spectrum-component-height-200);--spectrum-actionbutton-sized-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-actionbutton-sized-font-size:var(--spectrum-font-size-200);--spectrum-actionbutton-sized-text-to-visual:var(--spectrum-text-to-visual-200);--spectrum-actionbutton-sized-edge-to-visual:var(--spectrum-component-edge-to-visual-200);--spectrum-actionbutton-sized-edge-to-text:var(--spectrum-component-edge-to-text-200);--spectrum-actionbutton-sized-edge-to-visual-only:var(--spectrum-component-edge-to-visual-only-200);--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-border-radius-default:var(--system-action-button-size-l-border-radius-default)}.spectrum-ActionButton--sizeXL,::slotted(.spectrum-ActionButton--sizeXL){--spectrum-actionbutton-sized-height:var(--spectrum-component-height-300);--spectrum-actionbutton-sized-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-actionbutton-sized-font-size:var(--spectrum-font-size-300);--spectrum-actionbutton-sized-text-to-visual:var(--spectrum-text-to-visual-300);--spectrum-actionbutton-sized-edge-to-visual:var(--spectrum-component-edge-to-visual-300);--spectrum-actionbutton-sized-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-actionbutton-sized-edge-to-visual-only:var(--spectrum-component-edge-to-visual-only-300);--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-border-radius-default:var(--system-action-button-size-xl-border-radius-default)}.spectrum-ActionButton--quiet,::slotted(.spectrum-ActionButton--quiet){--spectrum-actionbutton-border-color:transparent;--spectrum-actionbutton-background-color-default:var(--system-action-button-quiet-background-color-default);--spectrum-actionbutton-background-color-hover:var(--system-action-button-quiet-background-color-hover);--spectrum-actionbutton-background-color-down:var(--system-action-button-quiet-background-color-down);--spectrum-actionbutton-background-color-focus:var(--system-action-button-quiet-background-color-focus)}.spectrum-ActionButton--staticBlack,::slotted(.spectrum-ActionButton--staticBlack){--mod-actionbutton-content-color-default:var(--spectrum-actionbutton-static-black-content-color-default,var(--spectrum-black));--mod-actionbutton-content-color-hover:var(--spectrum-actionbutton-static-black-content-color-hover,var(--spectrum-black));--mod-actionbutton-content-color-down:var(--spectrum-actionbutton-static-black-content-color-down,var(--spectrum-black));--mod-actionbutton-content-color-focus:var(--spectrum-actionbutton-static-black-content-color-focus,var(--spectrum-black));--mod-actionbutton-focus-indicator-color:var(--spectrum-static-black-focus-indicator-color);--spectrum-actionbutton-border-color-default:var(--system-action-button-static-black-border-color-default);--spectrum-actionbutton-border-color-hover:var(--system-action-button-static-black-border-color-hover);--spectrum-actionbutton-border-color-down:var(--system-action-button-static-black-border-color-down);--spectrum-actionbutton-border-color-focus:var(--system-action-button-static-black-border-color-focus);--spectrum-actionbutton-background-color-default:var(--system-action-button-static-black-background-color-default);--spectrum-actionbutton-background-color-hover:var(--system-action-button-static-black-background-color-hover);--spectrum-actionbutton-background-color-down:var(--system-action-button-static-black-background-color-down);--spectrum-actionbutton-background-color-focus:var(--system-action-button-static-black-background-color-focus);--spectrum-actionbutton-static-black-content-color-default:var(--system-action-button-static-black-content-color-default);--spectrum-actionbutton-static-black-content-color-hover:var(--system-action-button-static-black-content-color-hover);--spectrum-actionbutton-static-black-content-color-down:var(--system-action-button-static-black-content-color-down);--spectrum-actionbutton-static-black-content-color-focus:var(--system-action-button-static-black-content-color-focus)}.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet,::slotted(.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet){--spectrum-actionbutton-background-color-default:var(--system-action-button-static-black-quiet-background-color-default);--spectrum-actionbutton-background-color-hover:var(--system-action-button-static-black-quiet-background-color-hover);--spectrum-actionbutton-background-color-down:var(--system-action-button-static-black-quiet-background-color-down);--spectrum-actionbutton-background-color-focus:var(--system-action-button-static-black-quiet-background-color-focus)}.spectrum-ActionButton--staticWhite,::slotted(.spectrum-ActionButton--staticWhite){--mod-actionbutton-content-color-default:var(--spectrum-actionbutton-static-white-content-color-default,var(--spectrum-white));--mod-actionbutton-content-color-hover:var(--spectrum-actionbutton-static-white-content-color-hover,var(--spectrum-white));--mod-actionbutton-content-color-down:var(--spectrum-actionbutton-static-white-content-color-down,var(--spectrum-white));--mod-actionbutton-content-color-focus:var(--spectrum-actionbutton-static-white-content-color-focus,var(--spectrum-white));--mod-actionbutton-focus-indicator-color:var(--spectrum-static-white-focus-indicator-color);--spectrum-actionbutton-border-color-default:var(--system-action-button-static-white-border-color-default);--spectrum-actionbutton-border-color-hover:var(--system-action-button-static-white-border-color-hover);--spectrum-actionbutton-border-color-down:var(--system-action-button-static-white-border-color-down);--spectrum-actionbutton-border-color-focus:var(--system-action-button-static-white-border-color-focus);--spectrum-actionbutton-background-color-default:var(--system-action-button-static-white-background-color-default);--spectrum-actionbutton-background-color-hover:var(--system-action-button-static-white-background-color-hover);--spectrum-actionbutton-background-color-down:var(--system-action-button-static-white-background-color-down);--spectrum-actionbutton-background-color-focus:var(--system-action-button-static-white-background-color-focus);--spectrum-actionbutton-static-white-content-color-default:var(--system-action-button-static-white-content-color-default);--spectrum-actionbutton-static-white-content-color-hover:var(--system-action-button-static-white-content-color-hover);--spectrum-actionbutton-static-white-content-color-down:var(--system-action-button-static-white-content-color-down);--spectrum-actionbutton-static-white-content-color-focus:var(--system-action-button-static-white-content-color-focus)}.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet,::slotted(.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet){--spectrum-actionbutton-background-color-default:var(--system-action-button-static-white-quiet-background-color-default);--spectrum-actionbutton-background-color-hover:var(--system-action-button-static-white-quiet-background-color-hover);--spectrum-actionbutton-background-color-down:var(--system-action-button-static-white-quiet-background-color-down);--spectrum-actionbutton-background-color-focus:var(--system-action-button-static-white-quiet-background-color-focus)}@media (hover:hover){.spectrum-ActionButton:hover,::slotted(.spectrum-ActionButton:hover){--mod-actionbutton-background-color-default:var(--mod-actionbutton-background-color-hover,var(--spectrum-actionbutton-background-color-hover));--mod-actionbutton-border-color-default:var(--mod-actionbutton-border-color-hover,var(--spectrum-actionbutton-border-color-hover));--mod-actionbutton-content-color-default:var(--mod-actionbutton-content-color-hover,var(--spectrum-neutral-content-color-hover))}}.spectrum-ActionButton:focus-visible,::slotted(.spectrum-ActionButton:focus-visible){--mod-actionbutton-background-color-default:var(--mod-actionbutton-background-color-focus,var(--spectrum-actionbutton-background-color-focus));--mod-actionbutton-border-color-default:var(--mod-actionbutton-border-color-focus,var(--spectrum-actionbutton-border-color-focus));--mod-actionbutton-content-color-default:var(--mod-actionbutton-content-color-focus,var(--spectrum-neutral-content-color-key-focus));box-shadow:none;outline:none}.spectrum-ActionButton:active,::slotted(.spectrum-ActionButton:active){--mod-actionbutton-background-color-default:var(--mod-actionbutton-background-color-down,var(--spectrum-actionbutton-background-color-down));--mod-actionbutton-border-color-default:var(--mod-actionbutton-border-color-down,var(--spectrum-actionbutton-border-color-down));--mod-actionbutton-content-color-default:var(--mod-actionbutton-content-color-down,var(--spectrum-neutral-content-color-down))}.spectrum-ActionButton:dir(rtl),::slotted(.spectrum-ActionButton:dir(rtl)){--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}.spectrum-ActionButton:focus,::slotted(.spectrum-ActionButton:focus){outline:none}.spectrum-ActionButton:after{margin:calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width))*-1);border-radius:var(--mod-actionbutton-focus-indicator-border-radius,calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)));pointer-events:none;content:"";transition:box-shadow var(--mod-actionbutton-animation-duration,var(--spectrum-animation-duration-100))ease-in-out;position:absolute;inset:0}.spectrum-ActionButton:focus-visible:after{box-shadow:0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness)var(--spectrum-actionbutton-focus-indicator-color)}.spectrum-ActionButton :is([slot=icon],svg,img){inline-size:var(--spectrum-actionbutton-icon-size);block-size:var(--spectrum-actionbutton-icon-size);max-block-size:100%;color:inherit;flex-shrink:0;margin-inline-start:calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-edge-to-text));margin-inline-end:calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text))}.spectrum-ActionButton--iconOnly :is([slot=icon],svg,img){margin-inline-start:calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text))}.spectrum-ActionButton-label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);font-size:var(--spectrum-actionbutton-font-size);line-height:var(--spectrum-actionbutton-height);color:var(--mod-actionbutton-label-color,inherit);text-align:var(--spectrum-actionbutton-label-text-align);white-space:nowrap;text-overflow:ellipsis;place-self:center;overflow:hidden;pointer-events:none}@media (forced-colors:active){.spectrum-ActionButton,::slotted(.spectrum-ActionButton){--highcontrast-actionbutton-focus-indicator-color:ButtonText;--highcontrast-actionbutton-content-color:ButtonText}.spectrum-ActionButton:after{forced-color-adjust:none}}
`;
export default styles;
//# sourceMappingURL=global-elements.css.dev.js.map