@import "$homeDir/site/shared/resources.scss";

$loader-image-size: 50px;

@keyframes spin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(40deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1.25); }
  75% { transform: rotate(320deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes spin-out {
  0% { transform: rotate(360deg) scale(1); }
  75% { transform: rotate(0deg) scale(0.25); }
  100% { transform: rotate(0deg) scale(0.1) }
}

.mc-loader-component-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background: $color-opaque-light-bg;
}

img {
  position: relative;
  top: calc((100% - #{$loader-image-size}) / 2);
  width: $loader-image-size;
  height: $loader-image-size;
  animation: spin 1250ms infinite linear;
  transform-origin: center center;
}

// transition
.fade-enter-active, .fade-leave-active {
  transition: opacity 500ms ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-enter img, .fade-leave-to img {
  animation: spin-out 333ms infinite linear;
}