/**
 * Animations
 */

@mixin vue-anim($class-name, $keyframe-name) {
  .#{$class-name}-enter-active {
    animation: #{$keyframe-name}In .3s ease-in-out both;
  }
  .#{$class-name}-leave-active {
    animation: #{$keyframe-name}Out .3s ease-in-out both;
  }
}

@keyframes slideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: translateY(0);
  }
}

@keyframes slideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: translateY(-6px);
  }
}

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

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

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes notificationFadeIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes notificationFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@include vue-anim(slide-up, slideUp);
@include vue-anim(move-up, moveUp);
@include vue-anim(fade, fade);
@include vue-anim(notification-fade, notificationFade);


/**
 * Element Animation
 */

@keyframes icon-loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.collapse-transition {
  transition: height .3s linear;
}