@shopware-ag/meteor-component-library/dist/mt-snackbar.css

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

.mt-snackbar[data-v-6e328437] {
  width: 360px;
  position: fixed;
  bottom: var(--scale-size-16);
  right: var(--scale-size-16);
  z-index: 1600;
  pointer-events: none;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mt-snackbar[data-v-6e328437] .mt-snackbar-notification {
  --y: translateY(100%);
  --lift: -1;
  position: absolute;
  transform: var(--y);
  bottom: var(--scale-size-0);
  right: var(--scale-size-0);
  opacity: 0;
  touch-action: none;
  pointer-events: auto;
  transition:
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
    height 500ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: slideInFromRight-6e328437 0.5s cubic-bezier(0.66, 0, 0.34, 1);
}
.mt-snackbar[data-v-6e328437] .mt-snackbar-notification[data-mounted="true"] {
  --y: translateY(calc(var(--lift) * var(--offset)));
  opacity: 1;
}

/* Exit animation */
.mt-snackbar[data-v-6e328437] .mt-snackbar-notification[data-removed="true"] {
  animation: slideOutToBottom-6e328437 0.4s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
@keyframes slideInFromRight-6e328437 {
0% {
    transform: translateX(100%) var(--y);
    opacity: 0;
}
100% {
    transform: translateX(0) var(--y);
    opacity: 1;
}
}
@keyframes slideOutToBottom-6e328437 {
0% {
    transform: translateY(0) var(--y);
    opacity: 1;
}
75% {
    opacity: 0;
}
100% {
    transform: translateY(100%) var(--y);
    opacity: 0;
}
}