.toast {
  --toast-notice-height: 3em;
  --toast-x: 0;
  --toast-y: 100px;
  --toast-y-offset: 0px;
  position: fixed;
  right: var(--gutter1);
  bottom: 0;
  max-width: 400px;
  padding: 0.6em 1.2em;
  transform-origin: 100% 50%;
  border-radius: calc(var(--border-radius) / 2);
  color: #FFFFFF;
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.5, 1.26);
  transform: translate(var(--toast-x), calc(var(--toast-y) + var(--toast-y-offset)));
  font-size: 0.8em;
  z-index: 60;
  display: flex;
  align-items: center;
}
.toast.show {
  --toast-y: var(--gutter0-);
}
.toast + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 1) - var(--gutter1));
}
.toast + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 2) - var(--gutter1));
}
.toast + .toast.show + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 3) - var(--gutter1));
}
.toast + .toast.show + .toast.show + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 4) - var(--gutter1));
}
.toast + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 5) - var(--gutter1));
}
.toast + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 6) - var(--gutter1));
}
.toast + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 7) - var(--gutter1));
}
.toast + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 8) - var(--gutter1));
}
.toast + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 9) - var(--gutter1));
}
.toast + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show + .toast.show {
  --toast-x: 0;
  --toast-y: calc(-1 * ((var(--toast-notice-height) + var(--gutter0)) * 10) - var(--gutter1));
}
.toast.success {
  background-color: #21B755;
}
.toast.info {
  background-color: #FE9900;
}
.toast.error {
  background-color: #C90023;
}
.toast.loading {
  background-color: #0F72C0;
}
.toast.loading > * {
  pointer-events: all;
}
.toast.loading loading-bar {
  order: 1;
  margin-left: 1ch;
  --loading-bar-ring-stroke-colour: #FFFFFF;
  --loading-bar-background-stroke-colour: rgba(255, 255, 255, 0.3);
}
.toast.pop {
  animation: shake 0.3s ease 0s 1 normal forwards;
}
@keyframes shake {
  10%, 90% {
    --toast-x: -1px ;
  }
  20%, 80% {
    --toast-x: 2px ;
  }
  30%, 50%, 70% {
    --toast-x: -4px ;
  }
  40%, 60% {
    --toast-x: 4px ;
  }
}
.toast button {
  margin-left: 1ch;
  color: inherit;
}
.toast button.close {
  color: #FFFFFF;
  font-weight: bold;
  transform: scale(1.5);
}
.toast button.report-error + .close {
  margin-left: 1.5ch;
}

body.component\:modal .toast {
  --toast-y-offset: var(--gutter0-);
}
/*# sourceMappingURL=../sourcemaps/components/toast.css.map */