@import "../../scss/variables";

.loading-spinner {
  display: none;
}

.loading-spinner.is-active {
  display: block;
}

.loading-spinner-caption {
  color: $color-mercury;
  text-align: center;
}

.loading-spinner-ie9-fallback {
  display: none;
}

.loading-spinner-animation {
  width: 50px;
  height: 50px;
  margin: 10px auto;

  background-color: $color-axa-blue;
  animation: rotateplane 1.1s infinite ease-in-out;
}

.loading-spinner.is-fallback-active .loading-spinner-ie9-fallback {
  display: inline-block;
}

.loading-spinner.is-fallback-active .loading-spinner-animation {
  background-color: transparent;
  animation: none;
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }

  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}