@import url('../animations/fireworks.css');

.icon-spin-anim .feather-settings {
  @apply transition-all duration-200 ease-out;
}

.icon-spin-anim:hover .feather-settings {
  transform: scale(1.2) rotate(-45deg);
}

.icon-spin-anim:hover .bal-icon {
  @apply text-blue-600 dark:text-blue-400;
}

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

  100% {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out both;
}

.fade-in-delay {
  animation: fadeIn 0.5s ease-out 0.1s both;
}

.fade-in-slow {
  animation: fadeIn 1s ease-out 0.1s both;
}

@keyframes fadeInMoveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

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

@keyframes fadeInMoveDown {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

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

@keyframes spin-quarter {
  from {
    transform: rotate(0deg);
    opacity: 0;
  }

  to {
    transform: rotate(-90deg);
    opacity: 1;
  }
}

@keyframes fadeInMoveUpScaleUp {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(-10px);
  }

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

/* Transition component animations */

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3 ease-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.appear-enter-active {
  @apply transition-all duration-300 ease-out;
}

.appear-enter-to,
.appear-leave-from {
  @apply opacity-100;
}

.appear-enter-from,
.appear-leave-to {
  @apply opacity-0;
}

.appear-leave-active {
  @apply transition-all duration-200 ease-in;
}

/* POP */
.pop-enter-active {
  animation: pop 0.5s;
}

.pop-leave-active {
  animation: pop 0.25s reverse;
}
@keyframes pop {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
