/* this loader is consuming 30% CPU :'( */
$offset: 187;
$duration: 2.0s;

.aa-loader {
  display: block;

  &.centered {
    margin: 0 auto;
  }
}

.aa-loader .inner {
  transform-origin: center;
  animation: rotatorAnim $duration linear infinite;
}

@keyframes rotatorAnim {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(187deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.aa-loader .path {
  stroke-dasharray: $offset;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dashAnim $duration ease-in-out infinite,
  colorsAnim ($duration*4) ease-in-out infinite;
}

.aa-loader .inside {
  fill: #fdbb41;
  //stroke-dasharray: $offset;
  //stroke-dashoffset: 0;
  transform-origin: center;
  //animation: dashAnim $duration ease-in-out infinite,
  //colorsAnim ($duration*4) ease-in-out infinite;
  animation: scaleAnim $duration ease-in-out infinite;
}
.aa-loader .inside:hover {
  //fill: transparent;
}

@keyframes dashAnim {
  0% {
    stroke-dashoffset: $offset;
  }
  50% {
    stroke-dashoffset: $offset/4;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: $offset;
    transform: rotate(450deg);
  }
}

@keyframes colorsAnim {
  0% {
    stroke: #22428f;
  }
  //33% { stroke: #43bc9d; }
  50% {
    stroke: #43bc9d;
  }
  //66% {
  //  stroke: #fdbb41;
  //}
  100% {
    stroke: #22428f;
  }
}

@keyframes scaleAnim {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(.8, .8);
  }
  100% {
    transform: scale(1, 1);
  }
}
