@mixin cs-sphere($size, $sphere, $calc:true) {
	width   : nth($sphere, 1);
	height  : nth($sphere, 1);
	left    : if($calc, cs-calc-position($size, nth($sphere, 2)), nth($sphere, 2));
	top		: if($calc, cs-calc-position($size, nth($sphere, 3)), nth($sphere, 3));
}

@function cs-calc-position($max, $pos) { 
	@if ( $pos > 0 ) {
		@return $pos * $max; 
	}
	@return $pos;
}

@mixin cs-logo($color:silver, $size:120px, $delay:.1, $duration:2.1s ) {
  $i	 : 1;
  $cx  : $size / 2;
  $cy  : $size / 2;
  $r01 : ($size * .08);
  $r02 : ($size * .12);
  $r03 : ($size * .16);
  $r04 : ($size * .24);
  $r05 : ($size * .30);
  $nucleus : ($r01, (cs-calc-position($size,.5)-($r01 / 2)), (cs-calc-position($size,.5)-($r01 / 2))); 
  $spheres : (
		  ($r02, .52, .04), ($r01, .55, .19), ($r01, .66, .12), ($r01, .7,  .01), ($r01, .65, .23)
		, ($r03, .75, .16), ($r02, .73, .35), ($r02, .87, .33), ($r04, .7,  .48), ($r01, .81, .76)
		, ($r05, .47, .69), ($r01, .39, .72), ($r02, .33, .81), ($r03, .21, .65), ($r01, .21, .85)
		, ($r04,   0, .46), ($r03, .10, .28), ($r03, .02, .1),  ($r03, .22, .13), ($r01, .32, 0)
		, ($r02, .40, .11)
	);

	@at-root {
		@include keyframes(cs-logo-spinner) {
			  0% { @include transform(scale(1)); opacity : 1; }
			 20% { @include transform(scale(.4)); }
			 40% { @include transform(scale(.7)); opacity : 0;}
			 80% { @include transform(scale(1.1));  opacity : 1; }
			100% { @include transform(scale(1)); }
		}
	}
	
	position : relative;
	width    : $size;
	height   : $size;

	> span {
		position   : absolute;
		background : $color;

		@include border-radius(100%);
		@include animation(loader-pulse $duration infinite linear);

		&.nucleus   { @include cs-sphere($size:$size, $sphere:$nucleus, $calc:false); }
		
		@each $s in $spheres {
			$i : $i + 1;
      &:nth-of-type(#{$i}) { 
				@include cs-sphere($size:$size, $sphere:$s); 
				@include animation-delay(unquote(($delay * $i) + "s"));
			}
		}
	}

	&.loading {
		> span { 
			@include animation-name(cs-logo-spinner); 
			@include animation-iteration-count(infinite);
			@include animation-direction(ease);
			@include animation-duration($duration);

			&.nucleus { @include animation-name(none);  };
		}
	}
}

.cs-logo { @include cs-logo; }