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

The Spectrum CSS top-level backwards compatible package

.spectrum-ActionBar {
  --spectrum-actionbar-height: var(--spectrum-global-dimension-size-600);
  --spectrum-actionbar-padding-left: var(--spectrum-global-dimension-size-200);
  --spectrum-actionbar-padding-right: calc(var(--spectrum-global-dimension-size-200) / 2);
  --spectrum-actionbar-margin-x: var(--spectrum-global-dimension-size-200);

  --spectrum-actionbar-min-width: 280px;
  --spectrum-actionbar-max-width: 960px;
}

.spectrum-ActionBar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;

  bottom: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 0 var(--spectrum-actionbar-margin-x);
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;

  transition: height var(--spectrum-global-animation-duration-100, 130ms) ease-in-out,
              opacity var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
}

.spectrum-ActionBar.is-open {
    height: calc(var(--spectrum-actionbar-height, var(--spectrum-global-dimension-size-600)) + var(--spectrum-actionbar-margin-x) * 2);
    opacity: 1;
  }

[dir="ltr"] .spectrum-ActionBar--sticky {
  left: 0;
}

[dir="rtl"] .spectrum-ActionBar--sticky {
  right: 0;
}

[dir="ltr"] .spectrum-ActionBar--sticky {
  right: 0;
}

[dir="rtl"] .spectrum-ActionBar--sticky {
  left: 0;
}

.spectrum-ActionBar--sticky {
  position: sticky;
}

.spectrum-ActionBar--flexible .spectrum-ActionBar-popover {
    width: auto;
  }

.spectrum-ActionBar--fixed {
   position: fixed;
}

[dir="ltr"] .spectrum-ActionBar-popover {
  padding-left: var(--spectrum-actionbar-padding-left);
}

[dir="rtl"] .spectrum-ActionBar-popover {
  padding-right: var(--spectrum-actionbar-padding-left);
}

[dir="ltr"] .spectrum-ActionBar-popover {
  padding-right: var(--spectrum-actionbar-padding-right);
}

[dir="rtl"] .spectrum-ActionBar-popover {
  padding-left: var(--spectrum-actionbar-padding-right);
}

.spectrum-ActionBar-popover {
  position: relative;

  box-sizing: border-box;
  width: 100%;
  margin: auto;
  height: var(--spectrum-actionbar-height, var(--spectrum-global-dimension-size-600));
  min-width: var(--spectrum-actionbar-min-width, var(--spectrum-global-dimension-static-size-3500));
  max-width: var(--spectrum-actionbar-max-width, var(--spectrum-global-dimension-static-size-3500));

  -ms-flex-direction: row;

      flex-direction: row;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  pointer-events: auto;
}