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

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

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

  .#{$className}-leave {
    animation-timing-function: linear;
  }
}

@include fade-anim(fade, amosFade);
@include fade-anim(fade-down, amosFadeDown);
@include fade-anim(fade-left, amosFadeLeft);
@include fade-anim(fade-up, amosFadeUp);
@include fade-anim(fade-right, amosFadeRight);

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

  100% {
    opacity: 1;
  }
}

@keyframes amosFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes amosFadeDownIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
    animation-timing-function: $ease-in-circ;
  }

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

@keyframes amosFadeDownOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: $ease-out-circ;
  }

  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes amosFadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(10px);
    animation-timing-function: $ease-in-circ;
  }

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

@keyframes amosFadeLeftOut {
  0% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: $ease-out-circ;
  }

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

@keyframes amosFadeUpIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
    animation-timing-function: $ease-in-circ;
  }

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

@keyframes amosFadeUpOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: $ease-out-circ;
  }

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

@keyframes amosFadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    animation-timing-function: $ease-in-circ;
  }

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

@keyframes amosFadeRightOut {
  0% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: $ease-out-circ;
  }

  100% {
    opacity: 0;
    transform: translateX(10px);
  }
}