@import "settings.animations";

@mixin toast-keyframes {
  @keyframes toast {
    from {
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      animation-timing-function: ease-in;
      opacity: 0;
    }

    40% {
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      animation-timing-function: ease-in;
    }

    60% {
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }

    80% {
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
      transform: perspective(400px);
    }
  }
}

@mixin toast {
  animation-name: toast;
  animation-duration: $animation-duration;
  animation-fill-mode: both;
  animation-timing-function: $animation-easing;
  backface-visibility: visible !important;
}

@mixin toast--slow {
  animation-duration: $animation-duration-slow;
}

@mixin toast--fast {
  animation-duration: $animation-duration-fast;
}