@import '../../../../styles/common';

:root {
  // Sass does not allow arbitary Sass function calls in custom properties.
  // They must be interpolated
  // See https://github.com/sass/libsass/issues/2585
  --toast-translate-y-out: #{rem(150px)};
  --toast-translate-y-in: 0;
}

.ToastManager {
  position: fixed;
  z-index: z-index(toast, $fixed-element-stacking-order);
  right: 0;
  left: 0;
  text-align: center;
  bottom: var(--global-ribbon-height, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ToastWrapper {
  position: absolute;
  display: inline-flex;
  opacity: 0;
  transition: transform duration(slower) ease, opacity duration(slower) ease;
  transform: translateY(var(--toast-translate-y-out));
}

.ToastWrapper-enter,
.ToastWrapper-exit {
  transform: translateY(var(--toast-translate-y-out));
  opacity: 0;
}

.ToastWrapper-enter-done {
  transform: translateY(var(--toast-translate-y-in));
  opacity: 1;
}
