/* Spinner.css */

@-webkit-keyframes spinBall {
	0%        { -webkit-transform: rotateZ(@moon-spinner-ball-angle); }
	/* Slow down toward the top */
	15%       { -webkit-transform: rotateZ(160deg); }
	25%       { -webkit-transform: rotateZ(200deg); }
	30%       { -webkit-transform: rotateZ(225deg); }
	/* Speed back up as the ball falls */
	/* Impact at last ball */
	33%       { -webkit-transform: rotateZ(360 - (@moon-spinner-ball-angle * 3)); }
	39%, 67%  { -webkit-transform: rotateZ(360 - @moon-spinner-ball-angle); }
	/* Small bounce forward */
	72%       { -webkit-transform: rotateZ(360 + @moon-spinner-ball-angle + 10); }
	79%, 100% { -webkit-transform: rotateZ(360 + @moon-spinner-ball-angle); }
}

@-webkit-keyframes spinBall2 {
	/* Small bounce forward */
	0%        { -webkit-transform: rotateZ(360 - @moon-spinner-ball-angle); }
	5%        { -webkit-transform: rotateZ(360 + @moon-spinner-ball-angle + 10); }
	12%, 33%  { -webkit-transform: rotateZ(360 + @moon-spinner-ball-angle); }

	33.01%    { -webkit-transform: rotateZ(@moon-spinner-ball-angle); }
	/* Slow down toward the top */
	48%       { -webkit-transform: rotateZ(160deg); }
	58%       { -webkit-transform: rotateZ(200deg); }
	63%       { -webkit-transform: rotateZ(225deg); }
	/* Speed back up as the ball falls */
	/* Impact at last ball */
	67%       { -webkit-transform: rotateZ(360 - (@moon-spinner-ball-angle * 3)); }
	72%, 100% { -webkit-transform: rotateZ(360 - @moon-spinner-ball-angle); }
}

@-webkit-keyframes spinBall3 {
	/* Impact at last ball */
	0%, 100%  { -webkit-transform: rotateZ(360 - (@moon-spinner-ball-angle * 3)); }
	5%, 33%   { -webkit-transform: rotateZ(360 - @moon-spinner-ball-angle); }
	/* Small bounce forward */
	38%       { -webkit-transform: rotateZ(360 + @moon-spinner-ball-angle + 10); }
	45%, 66%  { -webkit-transform: rotateZ(360 + @moon-spinner-ball-angle); }

	66.01%    { -webkit-transform: rotateZ(@moon-spinner-ball-angle); }
	/* Slow down toward the top */
	81%       { -webkit-transform: rotateZ(160deg); }
	91%       { -webkit-transform: rotateZ(200deg); }
	97%       { -webkit-transform: rotateZ(225deg); }
	/* Speed back up as the ball falls */
}

@-webkit-keyframes propellerBall {
	0%   { -webkit-transform: rotateZ(0deg); }
	100% { -webkit-transform: rotateZ(360deg); }
}
@-webkit-keyframes propellerBall2 {
	0%   { -webkit-transform: rotateZ(120deg); }
	100% { -webkit-transform: rotateZ(480deg); }
}
@-webkit-keyframes propellerBall3 {
	0%   { -webkit-transform: rotateZ(240deg); }
	100% { -webkit-transform: rotateZ(600deg); }
}

@keyframes spinBall {
	0%        { transform: rotateZ(@moon-spinner-ball-angle); }
	/* Slow down toward the top */
	15%       { transform: rotateZ(160deg); }
	25%       { transform: rotateZ(200deg); }
	30%       { transform: rotateZ(225deg); }
	/* Speed back up as the ball falls */
	/* Impact at last ball */
	33%       { transform: rotateZ(360 - (@moon-spinner-ball-angle * 3)); }
	39%, 67%  { transform: rotateZ(360 - @moon-spinner-ball-angle); }
	/* Small bounce forward */
	72%       { transform: rotateZ(360 + @moon-spinner-ball-angle + 10); }
	79%, 100% { transform: rotateZ(360 + @moon-spinner-ball-angle); }
}

@keyframes spinBall2 {
	/* Small bounce forward */
	0%        { transform: rotateZ(360 - @moon-spinner-ball-angle); }
	5%        { transform: rotateZ(360 + @moon-spinner-ball-angle + 10); }
	12%, 33%  { transform: rotateZ(360 + @moon-spinner-ball-angle); }

	33.01%    { transform: rotateZ(@moon-spinner-ball-angle); }
	/* Slow down toward the top */
	48%       { transform: rotateZ(160deg); }
	58%       { transform: rotateZ(200deg); }
	63%       { transform: rotateZ(225deg); }
	/* Speed back up as the ball falls */
	/* Impact at last ball */
	67%       { transform: rotateZ(360 - (@moon-spinner-ball-angle * 3)); }
	72%, 100% { transform: rotateZ(360 - @moon-spinner-ball-angle); }
}

@keyframes spinBall3 {
	/* Impact at last ball */
	0%, 100%  { transform: rotateZ(360 - (@moon-spinner-ball-angle * 3)); }
	5%, 33%   { transform: rotateZ(360 - @moon-spinner-ball-angle); }
	/* Small bounce forward */
	38%       { transform: rotateZ(360 + @moon-spinner-ball-angle + 10); }
	45%, 66%  { transform: rotateZ(360 + @moon-spinner-ball-angle); }

	66.01%    { transform: rotateZ(@moon-spinner-ball-angle); }
	/* Slow down toward the top */
	81%       { transform: rotateZ(160deg); }
	91%       { transform: rotateZ(200deg); }
	97%       { transform: rotateZ(225deg); }
	/* Speed back up as the ball falls */
}

@keyframes propellerBall {
	0%   { transform: rotateZ(0deg); }
	100% { transform: rotateZ(360deg); }
}
@keyframes propellerBall2 {
	0%   { transform: rotateZ(120deg); }
	100% { transform: rotateZ(480deg); }
}
@keyframes propellerBall3 {
	0%   { transform: rotateZ(240deg); }
	100% { transform: rotateZ(600deg); }
}

.moon-spinner {
	min-height: @moon-spinner-size;
	min-width: @moon-spinner-size;
	line-height: @moon-spinner-size;
	position: relative;
	display: inline-block;
	color: @moon-spinner-text-color;
	background-color: @moon-spinner-background-color;
	border-radius: (@moon-button-height / 2);
	margin: 0 @moon-spotlight-outset;

	> * {
		display: inline-block;
	}
	// Horizontally centered
	&.center {
		margin: 0;
		margin-left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);

		// Vertically centered
		&.middle {
			position: absolute;
			top: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
		}
	}
	&.moon-spinner-transparent-background {
		background-color: transparent;
	}
	&.content {
		padding: ((@moon-button-height - @moon-spinner-size) / 2);

		.moon-spinner-client {
			max-width: 399px;
		}
	}
	&.running .moon-spinner-ball {
		-webkit-animation-play-state: running;
		animation-play-state: running;
	}
	.moon-spinner-ball-decorator {
		position: relative;
		width: @moon-spinner-size;
		height: @moon-spinner-size;
		float: left;
	}
	.moon-spinner-ball {
		position: absolute;
		text-align: center;
		font-size: 90%;
		line-height: 0.4em;
		-webkit-animation: none @moon-spinner-time linear infinite;
		animation: none @moon-spinner-time linear infinite;
		-webkit-animation-play-state: paused;
		animation-play-state: paused;
		height: @moon-spinner-ball-height;
		width: @moon-spinner-ball-width;		// While we're using a font-icon as our ball, we need extra clearance around it, so it's not clipped by the browser's layer composer.
		padding: 0 1px;
		left: (50% - (@moon-spinner-ball-width / 2));
		bottom: (50% - @moon-spinner-ball-height - @moon-spinner-ball-disatance);
		-webkit-transform-origin: center ((@moon-spinner-ball-disatance / @moon-spinner-ball-height) * -100);
		transform-origin: center ((@moon-spinner-ball-disatance / @moon-spinner-ball-height) * -100);

		&:after {
			content: @moon-icon-circle;
			font-family: @moon-icon-font-family;
		}
	}
	.moon-spinner-ball1 {
		-webkit-animation-name: spinBall;
		animation-name: spinBall;
		color: @moon-spinner-ball1-color;
		-webkit-transform: rotateZ(@moon-spinner-ball-angle);
		transform: rotateZ(@moon-spinner-ball-angle);
	}
	.moon-spinner-ball2 {
		-webkit-animation-name: spinBall2;
		animation-name: spinBall2;
		color: @moon-spinner-ball2-color;
		-webkit-transform: rotateZ(360 - @moon-spinner-ball-angle);
		transform: rotateZ(360 - @moon-spinner-ball-angle);
	}
	.moon-spinner-ball3 {
		-webkit-animation-name: spinBall3;
		animation-name: spinBall3;
		color: @moon-spinner-ball3-color;
		-webkit-transform: rotateZ(360 - (@moon-spinner-ball-angle * 3));
		transform: rotateZ(360 - (@moon-spinner-ball-angle * 3));
	}
	.moon-spinner-client {
		float: left;
		line-height: @moon-spinner-size;
		margin: 0 2.6ex 0 0;
	}
}
.enyo-locale-right-to-left .moon-spinner {
	// This allows for the spinner to spin in a counter-clockwise direction in RTL mode
	// .moon-spinner-ball-decorator {
	// 	-webkit-transform: scaleX(-1);
	// }
	.moon-spinner-ball-decorator {
		float: right;
	}
	.moon-spinner-client {
		float: right;
		margin-left: 2.6ex;
		margin-right: 0;
	}
	// Horizontally centered
	&.center {
		margin: 0;
		margin-right: 50%;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);

		// Vertically centered
		&.middle {
			-webkit-transform: translateX(50%) translateY(-50%);
			transform: translateX(50%) translateY(-50%);
		}
	}
}
