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

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

  .#{$className}-enter,
  .#{$className}-appear {
    opacity: 0;
    animation-timing-function: $ease-out-circ;
  }

  .#{$className}-leave {
    animation-timing-function: $ease-in-circ;
  }
}

@include move-anim(move-up, amosMoveUp);
@include move-anim(move-down, amosMoveDown);
@include move-anim(move-left, amosMoveLeft);
@include move-anim(move-right, amosMoveRight);

@keyframes amosMoveDownIn {
  0% {
    transform-origin: 0 0;
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    transform-origin: 0 0;
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes amosMoveDownOut {
  0% {
    transform-origin: 0 0;
    opacity: 1;
    transform: translateY(0%);
  }

  100% {
    transform-origin: 0 0;
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes amosMoveLeftIn {
  0% {
    transform-origin: 0 0;
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    transform-origin: 0 0;
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes amosMoveLeftOut {
  0% {
    transform-origin: 0 0;
    opacity: 1;
    transform: translateX(0%);
  }

  100% {
    transform-origin: 0 0;
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes amosMoveRightIn {
  0% {
    opacity: 0;
    transform-origin: 0 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}

@keyframes amosMoveRightOut {
  0% {
    transform-origin: 0 0;
    opacity: 1;
    transform: translateX(0%);
  }

  100% {
    transform-origin: 0 0;
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes amosMoveUpIn {
  0% {
    transform-origin: 0 0;
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    transform-origin: 0 0;
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes amosMoveUpOut {
  0% {
    transform-origin: 0 0;
    opacity: 1;
    transform: translateY(0%);
  }

  100% {
    transform-origin: 0 0;
    opacity: 0;
    transform: translateY(-100%);
  }
}