$duration: 300ms;
$enter-easing: cubic-bezier(0.4, 0, 1, 1);
$shift-easing: cubic-bezier(0, 0, 0.2, 1);

@keyframes toast-item-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes toast-item-slide-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes toast-item-fade-out {
  to {
    opacity: 0;
  }
}

.toast-container {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--wds-space-100, 6px);
  width: fit-content;
  height: 0;
  left: 0;
  right: 0;
  bottom: 26px;
  margin: 0 auto;
  z-index: 5500;
  pointer-events: auto;

  & &__item {
    transition: opacity $duration $enter-easing;
    animation: toast-item-fade-in $duration $enter-easing;
  }

  &--stacked &__item {
    animation-name: toast-item-slide-in;
  }

  & &__item--exiting {
    pointer-events: none;
    animation: toast-item-fade-out 0s $enter-easing forwards;
  }

  &--stacked &__item--exiting {
    animation-duration: $duration;
  }

  & &__item--hidden {
    opacity: 0;
    transition: none;
    pointer-events: none;
  }

  &--stacked &__item--hidden {
    transition: opacity $duration $shift-easing;
  }

  @media (prefers-reduced-motion) {
    &--stacked &__item {
      animation-name: toast-item-fade-in;
    }
  }
}