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

@container style(--wds-internal-theme: odeditor) {
  @keyframes toast-item-fade-in-odeditor {
    from {
      opacity: 0;
    }
  }

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

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

.toast-container {
  @container style(--wds-internal-theme: odeditor) {
    & &__item {
      animation: toast-item-slide-in-odeditor $enter-duration $enter-easing;
    }

    & &__item--exiting {
      animation: toast-item-fade-out-odeditor $exit-duration $exit-easing forwards;
    }

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

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

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