@import "compass/css3";

$plus-loader-size: 48px !default;
$plus-loader-speed: 3s !default;
$plus-loader-colors: #f86 #fc6 #6d7 #4ae !default;

$plus-loader-color-1: nth($plus-loader-colors, 1) !default;
$plus-loader-color-2: nth($plus-loader-colors, 2) !default;
$plus-loader-color-3: nth($plus-loader-colors, 3) !default;
$plus-loader-color-4: nth($plus-loader-colors, 4) !default;

@include keyframes(plus-loader-top) {
  2.5% {
    background: $plus-loader-color-1;
    @include transform(rotateY(0deg));
    @include animation-timing-function(ease-in);
  }
  13.75% {
    background: scale-color($plus-loader-color-1, $lightness: -25%);
    @include transform(rotateY(90deg));
    @include animation-timing-function(step-start);
  }
  13.76% {
    background: scale-color($plus-loader-color-2, $lightness: -25%);
    @include transform(rotateY(90deg));
    @include animation-timing-function(ease-out);
  }
  25% {
    background: $plus-loader-color-2;
    @include transform(rotateY(180deg));
  }
  27.5% {
    background: $plus-loader-color-2;
    @include transform(rotateY(180deg));
    @include animation-timing-function(ease-in);
  }
  41.25% {
    background: scale-color($plus-loader-color-2, $lightness: -25%);
    @include transform(rotateY(90deg));
    @include animation-timing-function(step-start);
  }
  41.26% {
    background: scale-color($plus-loader-color-3, $lightness: -25%);
    @include transform(rotateY(90deg));
    @include animation-timing-function(ease-out);
  }
  50% {
    background: $plus-loader-color-3;
    @include transform(rotateY(0deg));
  }
  
  52.5% {
    background: $plus-loader-color-3;
    @include transform(rotateY(0deg));
    @include animation-timing-function(ease-in);
  }
  63.75% {
    background: scale-color($plus-loader-color-3, $lightness: -25%);
    @include transform(rotateY(90deg));
    @include animation-timing-function(step-start);
  }
  63.76% {
    background: scale-color($plus-loader-color-4, $lightness: -25%);
    @include transform(rotateY(90deg));
    @include animation-timing-function(ease-out);
  }
  75% {
    background: $plus-loader-color-4;
    @include transform(rotateY(180deg));
  }
  77.5% {
    background: $plus-loader-color-4;
    @include transform(rotateY(180deg));
    @include animation-timing-function(ease-in);
  }
  91.25% {
    background: scale-color($plus-loader-color-4, $lightness: -25%);
    @include transform(rotateY(90deg));
    @include animation-timing-function(step-start);
  }
  91.26% {
    background: scale-color($plus-loader-color-1, $lightness: -25%);
    @include transform(rotateY(90deg));
    @include animation-timing-function(ease-in);
  }
  100% {
    background: $plus-loader-color-1;
    @include transform(rotateY(0deg));
    @include animation-timing-function(step-start);
  }
}

@include keyframes(plus-loader-bottom) {
  0% {
    background: $plus-loader-color-2;
    @include animation-timing-function(step-start);
  }
  50% {
    background: $plus-loader-color-2;
    @include animation-timing-function(step-start);
  }
  75% {
    background: $plus-loader-color-4;
    @include animation-timing-function(step-start);
  }
  100% {
    background: $plus-loader-color-4;
    @include animation-timing-function(step-start);
  }
}

@include keyframes(plus-loader-background) {
  0% {
    background: $plus-loader-color-1;
    @include transform(rotateZ(180deg));
  }
  25% {
    background: $plus-loader-color-1;
    @include transform(rotateZ(180deg));
    @include animation-timing-function(step-start);
  }
  27.5% {
    background: $plus-loader-color-3;
    @include transform(rotateZ(90deg));
  }
  50% {
    background: $plus-loader-color-3;
    @include transform(rotateZ(90deg));
    @include animation-timing-function(step-start);
  }
  52.5% {
    background: $plus-loader-color-3;
    @include transform(rotateZ(0deg));
  }
  
  75% {
    background: $plus-loader-color-3;
    @include transform(rotateZ(0deg));
    @include animation-timing-function(step-start);
  }
  77.5% {
    background: $plus-loader-color-1;
    @include transform(rotateZ(270deg));
  }
  100% {
    background: $plus-loader-color-1;
    @include transform(rotateZ(270deg));
    @include animation-timing-function(step-start);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.plus-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;

  display: inline-block;
  width: $plus-loader-size;
  height: $plus-loader-size;
  
  background: $plus-loader-color-1;
  @include border-radius($plus-loader-size / 2);
  
  &::after {
    background: $plus-loader-color-1;
    @include border-radius(($plus-loader-size / 2) 0 0 ($plus-loader-size / 2));
    content: '';
    position: absolute;
    right: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    @include transform-origin(100%, 50%);
    @include animation(plus-loader-top $plus-loader-speed infinite linear);
  }
  
  &::before {
    background: $plus-loader-color-2;
    @include border-radius(($plus-loader-size / 2) 0 0 ($plus-loader-size / 2));
    content: '';
    position: absolute;
    right: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    @include transform-origin(100%, 50%);
    @include animation(plus-loader-bottom $plus-loader-speed infinite linear);
  }

  @include transform(rotateZ(90deg));
  @include transform-origin(50%, 50%);
  @include animation(plus-loader-background $plus-loader-speed infinite ease-in-out);
}
