@import "compass/css3";

$ball-loader-size: 200px !default;
$ball-loader-color: #f86 !default;
$ball-loader-speed: 1500ms !default;

$ball-loader-highlight: adjust-color($ball-loader-color, $lightness: 10%) !default;
$ball-loader-diameter: $ball-loader-size / 4 !default;

@include keyframes(ball-loader) {
  0%  {
    @include transform(translate3d(0, 0, 0) scale3d(1, 1, 1));
    @include animation-timing-function(ease-in);
  }
  45% {
    @include transform(translate3d(0, $ball-loader-size * 0.75, -10px) scale3d(1, 0.95, 1));
    @include animation-timing-function(ease-in);
  }
  50% {
    @include transform(translate3d(0, $ball-loader-size * 0.75, -10px) scale3d(1, 0.5, 1));
    @include animation-timing-function(linear);
  }
  55% {
    @include transform(translate3d(0, $ball-loader-size * 0.75, -10px) scale3d(1, 1.25, 1));
    @include animation-timing-function(ease-out);
  }
}

@include keyframes(ball-loader-highlight) {
  0%  {
    @include transform(skew(-20deg, 0) translate3d(0, $ball-loader-diameter / 20, 1px));
    @include animation-timing-function(ease-in);
  }
  45% {
    @include transform(skew(-30deg, 0) translate3d(0, 0, 1px));
    @include animation-timing-function(ease-in);
  }
  50% {
    @include transform(skew(-30deg, 0) translate3d(0, 0, 1px));
    @include animation-timing-function(linear);
  }
  55% {
    @include transform(skew(-30deg, 0) translate3d(0, 0, 1px));
    @include animation-timing-function(ease-out);
  }
  100%  {
    @include transform(skew(-20deg, 0) translate3d(0, $ball-loader-diameter / 20 , 1px));
    @include animation-timing-function(ease-in);
  }
}

@include keyframes(ball-loader-shadow) {
  0%  {
    @include transform(translate3d($ball-loader-size / 3, $ball-loader-size / 3, -1px) scale3d(1.25, 1.25, 1));
    @include animation-timing-function(ease-in);
  }
  45% {
    @include transform(translate3d($ball-loader-diameter / 4, -$ball-loader-diameter * 0.3, -1px));
    @include animation-timing-function(ease-in);
  }
  50% {
    @include transform(translate3d($ball-loader-diameter / 4, -$ball-loader-diameter * 0.3, -1px) scale3d(1, 1, 1));
    @include animation-timing-function(linear);
  }
  55% {
    @include transform(translate3d($ball-loader-diameter / 4, -$ball-loader-diameter * 0.3, -1px));
    @include animation-timing-function(ease-out);
  }
  100%  {
    @include transform(translate3d($ball-loader-size / 3, $ball-loader-size / 3, -1px) scale3d(1.25, 1.25, 1));
    @include animation-timing-function(ease-in);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.ball-loader:not(:required) {
  position: relative;
  display: inline-block;
  // z-index: 1;
  font-size: 0;
  letter-spacing: -1px;
  
  border-radius: 100%;
  background: $ball-loader-color;
  
  width: $ball-loader-diameter;
  height: $ball-loader-diameter;
  
  @include transform-style(preserve-3d);
  @include transform(translate3d(0, 0, 0) scale3d(1, 1, 1));
  @include transform-origin(0, 100%);
  @include animation(ball-loader $ball-loader-speed infinite linear);
  
  &::after {
    content: '';
    
    position: absolute;
    top: $ball-loader-diameter * 0.09;
    left: $ball-loader-diameter * 0.11;
    // z-index: 1;
      
    width: $ball-loader-diameter * 0.3;
    height: $ball-loader-diameter * 0.3;
    
    background: $ball-loader-highlight;
    border-radius: 100%;
    
    @include transform(skew(-20deg, 0) translate3d(0, $ball-loader-diameter / 20, 1px));
    @include animation(ball-loader-highlight $ball-loader-speed infinite linear);
  }
  
  &::before {
    content: '';
    
    position: absolute;
    top: $ball-loader-diameter;
    left: $ball-loader-diameter * 0.11;
      
    width: $ball-loader-diameter;
    height: $ball-loader-diameter * 0.3;
    
    background: rgba(black, 0.2);
    border-radius: 100%;
    
    @include transform(translate3d($ball-loader-size / 3, $ball-loader-size / 3, -1px) scale3d(1.25, 1.25, 1));
    @include animation(ball-loader-shadow $ball-loader-speed infinite linear);
    
    @include filter(blur(1px));
  }
}
