@import './../mixins/makeanim.scss';

@mixin drop-anim($className, $keyframeName) {
  @include make-anim($className, $keyframeName);
}

@include drop-anim(drop-left, amosDropLeft);
@include drop-anim(drop-right, amosDropRight);

@keyframes amosDropLeftIn {
  0% {
    opacity: 0;
  }

  1% {
    opacity: 1;
    transform: rotate(2deg) translateY(-15px);
    transform-origin: right bottom;
    animation-timing-function: ease-in;
  }

  50% {
    opacity: 1;
    transform: rotate(0) translateY(0);
    transform-origin: right bottom;
    animation-timing-function: ease-out;
  }

  75% {
    transform: rotate(-0.5deg) translateY(0);
    transform-origin: left bottom;
    animation-timing-function: $ease-in-circ;
  }

  100% {
    opacity: 1;
    transform: rotate(0) translateY(0);
    transform-origin: center bottom;
    animation-timing-function: $ease-out-circ;
  }
}

@keyframes amosDropRightIn {
  0% {
    opacity: 0;
  }

  1% {
    opacity: 1;
    transform: rotate(-2deg) translateY(-15px);
    transform-origin: left bottom;
    animation-timing-function: ease-in;
  }

  50% {
    opacity: 1;
    transform: rotate(0) translateY(0);
    transform-origin: left bottom;
    animation-timing-function: ease-out;
  }

  75% {
    transform: rotate(0.5deg) translateY(0);
    transform-origin: right bottom;
    animation-timing-function: $ease-in-circ;
  }

  100% {
    opacity: 1;
    transform: rotate(0) translateY(0);
    transform-origin: center bottom;
    animation-timing-function: $ease-out-circ;
  }
}