@adobe/spectrum-css/dist/components/quickaction/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-QuickActions {
  --spectrum-overlay-animation-distance: var(--spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75));

  visibility: hidden;

  opacity: 0;

  transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
              opacity var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
              visibility 0ms linear var(--spectrum-global-animation-duration-100, 130ms);

  pointer-events: none;
}

.spectrum-QuickActions.is-open {
  visibility: visible;

  opacity: 1;

  transition-delay: 0ms;

  pointer-events: auto;
}

.spectrum-QuickActions--left.is-open {
  transform: translateX(var(--spectrum-overlay-animation-distance));
}

.spectrum-QuickActions--right.is-open {
  transform: translateX(calc(-1 * var(--spectrum-overlay-animation-distance)));
}

.spectrum-QuickActions {
  box-sizing: border-box;

  display: -ms-inline-flexbox;

  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;

  padding-top: var(--spectrum-quickactions-padding-y, var(--spectrum-global-dimension-size-50));

  padding-bottom: var(--spectrum-quickactions-padding-y, var(--spectrum-global-dimension-size-50));
  padding-left: var(--spectrum-quickactions-padding-x, var(--spectrum-global-dimension-size-50));
  padding-right: var(--spectrum-quickactions-padding-x, var(--spectrum-global-dimension-size-50));

  height: var(--spectrum-quickactions-height, var(--spectrum-global-dimension-size-500));

  border-radius: var(--spectrum-quickactions-border-radius, var(--spectrum-alias-border-radius-regular));
}

[dir="ltr"] .spectrum-QuickActions .spectrum-ActionButton + .spectrum-ActionButton {
    margin-left: var(--spectrum-quickactions-button-gap-x, var(--spectrum-global-dimension-size-100));
}

[dir="rtl"] .spectrum-QuickActions .spectrum-ActionButton + .spectrum-ActionButton {
    margin-right: var(--spectrum-quickactions-button-gap-x, var(--spectrum-global-dimension-size-100));
}

[dir="ltr"] .spectrum-QuickActions--textOnly .spectrum-ActionButton + .spectrum-ActionButton {
    margin-left: var(--spectrum-quickactions-text-button-gap-x, var(--spectrum-global-dimension-size-50));
}

[dir="rtl"] .spectrum-QuickActions--textOnly .spectrum-ActionButton + .spectrum-ActionButton {
    margin-right: var(--spectrum-quickactions-text-button-gap-x, var(--spectrum-global-dimension-size-50));
}

.spectrum-QuickActions-overlay {
  background-color: var(--spectrum-quickactions-overlay-color, var(--spectrum-alias-background-color-quickactions-overlay));
}

.spectrum-QuickActions {
  background-color: var(--spectrum-quickactions-background-color, var(--spectrum-alias-background-color-quickactions));
}