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

The Spectrum CSS top-level backwards compatible package

.spectrum-Tray {

  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-Tray.is-open {
  visibility: visible;

  opacity: 1;

  transition-delay: 0ms;

  pointer-events: auto;
}

.spectrum-Tray {
  --spectrum-dialog-confirm-exit-animation-delay: 0ms;
  --spectrum-tray-margin-top: 64px;
}

[dir="ltr"] .spectrum-Tray-wrapper {
  left: 0;
}

[dir="rtl"] .spectrum-Tray-wrapper {
  right: 0;
}

.spectrum-Tray-wrapper {
  position: fixed;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
  z-index: 2;
}

.spectrum-Tray {
  width: var(--spectrum-tray-width, 100%);
  max-width: var(--spectrum-tray-max-width, 375px);
  min-height: var(--spectrum-tray-min-height, var(--spectrum-global-dimension-static-size-800));
  max-height: calc(100vh - var(--spectrum-tray-margin-top));
  overflow: auto;
  outline: none;
  border-radius: var(--spectrum-tray-full-width-border-radius, var(--spectrum-alias-border-radius-regular))
    var(--spectrum-tray-full-width-border-radius, var(--spectrum-alias-border-radius-regular))
    var(--spectrum-tray-border-radius, 0px) var(--spectrum-tray-border-radius, 0px);
  padding: var(--spectrum-tray-padding-y, 0) var(--spectrum-tray-padding-x, var(--spectrum-global-dimension-static-size-100));
  transform: translateY(100%);
  transition: opacity var(--spectrum-dialog-confirm-exit-animation-duration, var(--spectrum-global-animation-duration-100))
      cubic-bezier(0.5, 0, 1, 1)
      var(--spectrum-dialog-confirm-exit-animation-delay, 0ms),
    visibility 0ms linear
      calc(var(--spectrum-dialog-confirm-exit-animation-delay, 0ms) + var(--spectrum-dialog-confirm-exit-animation-duration, var(--spectrum-global-animation-duration-100))),
    transform var(--spectrum-dialog-confirm-exit-animation-duration, var(--spectrum-global-animation-duration-100))
      cubic-bezier(0.5, 0, 1, 1)
      var(--spectrum-dialog-confirm-exit-animation-delay, 0ms);
}

.spectrum-Tray.is-open {
    transition: transform
        var(--spectrum-dialog-confirm-entry-animation-duration, var(--spectrum-global-animation-duration-500))
        cubic-bezier(0, 0, 0.4, 1)
        var(--spectrum-dialog-confirm-entry-animation-delay, var(--spectrum-global-animation-duration-200)),
      opacity var(--spectrum-dialog-confirm-entry-animation-duration, var(--spectrum-global-animation-duration-500))
        cubic-bezier(0, 0, 0.4, 1)
        var(--spectrum-dialog-confirm-entry-animation-delay, var(--spectrum-global-animation-duration-200));
    transform: translateY(0);
  }

@media (max-inline-size: 375px) {
  .spectrum-Tray {
    border-radius: var(--spectrum-tray-border-radius, 0px);
  }
}