// ================================================================================
// + Spinner
// --------------------------------------------------------------------------------

$Spinner_Size: 56px;

@keyframes Spinner_Animation-Rotate {
	  0% { transform: rotate(  0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes Spinner_Animation-Beat {
	  0% { transform: scale(1.00); opacity: 0.75; }
	 25% { transform: scale(1.25); opacity: 0.50; }
	 50% { transform: scale(1.00); opacity: 0.75; }
	 75% { transform: scale(0.80); opacity: 1.00; }
	100% { transform: scale(1.00); opacity: 0.75; }
}
/*
@keyframes Spinner_Animation-Glow {
	  0% { @include size(3px     ); opacity: 1.0; }
	 25% { @include size(1px     ); }
	 50% { @include size(1px, 6px); opacity: 1.0; }
	 75% { @include size(1px     ); }
	100% { @include size(3px     ); opacity: 1.0; }
}*/

@mixin Spiner-Content() {
	&:before, &:after {
		content: "";
		display: block;
		position: absolute;
		box-sizing: border-box;
		@include offset(0);
		margin: auto;
		border-radius: 50%;
		opacity: 0.75;
	}
	&:before { // Core
		@include size(24px);
		background: rgba(192,192,192, 0.75);
	}
	&:after { // Halo
		@include size(32px);
		border: solid 1.5px rgba(192,192,192, 0.5);
	}
	span { // Bits
		display: block;
		position: absolute;
		@include offset(0);
		margin: auto;
		@include size(100%);
		transform-origin: 50%;
		&:before {
			content: "";
			display: block;
			@include offset(0, 0, auto);
			margin: 0 auto;
			border-radius: 50%;
			@include size(3px);
		}
		$SCOPED__Spinner_HowManyBits: 12; // 0-12
		@if $SCOPED__Spinner_HowManyBits > 0 {
			@for $i from 1 through $SCOPED__Spinner_HowManyBits {
				&:nth-child(#{$i}) {
					transform: rotate(#{360deg / $SCOPED__Spinner_HowManyBits * $i});
					&:before { background: darken(rgb(255,255,255), (72% / $SCOPED__Spinner_HowManyBits * $i)); }
				}
			}
			@if $SCOPED__Spinner_HowManyBits < 12 { @for $i from $SCOPED__Spinner_HowManyBits + 1 through 12 { &:nth-child(#{$i}) { display: none; } } }
		}
	}
	html.busy & {
		&        { animation:   Spinner_Animation-Rotate 1.50s linear      0s infinite normal; }
		&:before,
		&:after  { animation:   Spinner_Animation-Beat   2.25s ease        0s infinite normal; }
		span     { animation: /*Spinner_Animation-Glow   4.00s ease-in-out 0s infinite normal*/ none; }
	}
}