/**
 * Generate a full animated, single element, flip ball style loader
 *
 * @param 		{String} 		[$shape=circle] 			The shape of the loader (circle,rect)
 * @param 		{Number} 		[$size=1em] 				The size of the loader
 * @param 		{Color} 		[$color=primary] 			The color of the loader. Can be a list of colors
 * @param 		{Second} 		[$a-duration=1s] 			The overall animation duration
 * @param 		{Second} 		[$a-delay=0s] 				The delay between two animation cycle
 * @param 		{String} 		[$a-ease=ease-in-out]		The ease to use for the animation
 *
 * @example
 * .my-cool-loader {
 * 		\@include s-loader-flip-ball();
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com> (https://olivierbossel.com)
 */
@mixin s-loader-flip-ball(
  $shape: circle,
  $size: 1em,
  $color: primary,
  $a-duration: 1s,
  $a-delay: 0s,
  $a-ease: ease-in-out
) {
  @if $_sugar-test-arguments {
    $shape: s-test-argument(
      "s-loader-flip-ball",
      "shape",
      (circle, rect),
      $shape
    );
    $size: s-test-argument("s-loader-flip-ball", "size", number, $size);
    $color: s-test-argument(
      "s-loader-flip-ball",
      "color",
      "color|list-color",
      $color
    );
    $a-duration: s-test-argument(
      "s-loader-flip-ball",
      "a-duration",
      second,
      $a-duration
    );
    $a-delay: s-test-argument(
      "s-loader-flip-ball",
      "a-delay",
      second,
      $a-delay
    );
    $a-ease: s-test-argument("s-loader-flip-ball", "a-ease", string, $a-ease);
  }

  // handle colors
  $colors: null;
  @if s-is($color, list-color) and length($color) > 1 {
    $colors: $color;
  }

  $a-duration: $a-duration + $a-delay;

  $a-name: unquote("google-ball-#{unique-id()}");

  $c: $color;
  @if $colors {
    $c: nth($colors, length($colors));
  }

  display: inline-block;
  background: $c;
  width: $size;
  height: $size;
  @if $shape == circle {
    border-radius: 50%;
  }
  animation: #{$a-name}-rotate $a-duration $a-ease 0s infinite;
  position: relative;

  &:after,
  &:before {
    display: block;
    width: $size;
    height: $size/2;
    @if $shape == circle {
      border-radius: $size $size 0 0;
    }
    content: "";
    background: s-color($c);
    transform-origin: $size / 2 $size / 2;
    position: absolute;
    top: 0;
    left: 0;
  }
  &:after {
    animation: #{$a-name}-after $a-duration $a-ease 0s infinite;
    // display: none;
  }
  &:before {
    animation: #{$a-name}-before $a-duration $a-ease 0s infinite;
    // background : white;
  }

  $p-delay: 0;
  @if $a-delay > 0 {
    $p-delay: 1 / $a-duration * $a-delay;
  }
  $steps: 2;
  @if $colors {
    $steps: length($colors);
  }

  @keyframes #{$a-name}-after {
    @for $i from 1 through $steps {
      #{percentage(1 / $steps * $i) - 0.0001%} {
        transform: rotateX(180deg);
      }
      #{percentage(1 / $steps * $i)} {
        background: s-color(nth($colors, $i));
        transform: rotateX(0deg);
      }
      #{percentage(1 / $steps * $i) - percentage(1 / $steps) / 2} {
        $c: null;
        @if $i - 1 <= 0 {
          $c: nth($colors, length($colors));
        } @else {
          $c: nth($colors, $i - 1);
        }
        background: s-color($c, -darken 10%);
      }
      #{(percentage(1 / $steps * $i) - percentage(1 / $steps) / 2 + 0.0001%)} {
        $c: null;
        @if $i + 1 > length($colors) {
          $c: nth($colors, 1);
        } @else {
          $c: nth($colors, $i + 1);
        }
        background: s-color(nth($colors, $i), -lighten 8%);
      }
    }
  }
  @keyframes #{$a-name}-before {
    @for $i from 1 through $steps {
      #{percentage(1 / $steps * $i) - 0.0001%} {
        background: s-color(nth($colors, $i));
      }
      #{percentage(1 / $steps * $i)} {
        $c: null;
        @if $i + 1 > length($colors) {
          $c: nth($colors, 1);
        } @else {
          $c: nth($colors, $i + 1);
        }
        background: s-color($c);
      }
    }
  }
  @keyframes #{$a-name}-rotate {
    @for $i from 1 through $steps {
      #{percentage(1 / $steps * $i) - 0.0001%} {
        transform: rotate(($i - 1) * 90deg);
        $c: null;
        @if $i - 1 <= 0 {
          $c: nth($colors, length($colors));
          background: s-color($c);
        } @else {
          $c: nth($colors, $i - 1);
          background: s-color($c);
        }
      }
      #{percentage(1 / $steps * $i)} {
        transform: rotate($i * 90deg);
        background: s-color(nth($colors, $i));
      }
    }
  }
}