// ============================================================================
// :: Loader
// ============================================================================
/**
 * Spinning version of the logo that can be used as a loader
 */

// ============================================================================
// :: Root
// ============================================================================
.a-loader {
  text-align: center;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-loader__image {
  animation: spin 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.a-loader__message {
  @extend %__h4-default;

  display: block;
}

// ============================================================================
// :: Animations
// ============================================================================
@keyframes spin {

  0% {
    transform: rotateY(0deg);
  }

  20% {
    transform: rotateY(180deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  70% {
    transform: rotateY(360deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}