@function to-list($value, $num: 5) {
	$newList: ($value);

	@for $i from 1 to $num {
		$newList: append($newList, $value, 'comma');
	}

	@return $newList;
}

@mixin trailing-shadow($xOffset, $yOffset, $color: $loading-animation-color, $size: (-0.4em, -0.42em, -0.44em, -0.46em, -0.477em)) {
	@if type-of($xOffset) != 'list' {
		$xOffset: to-list($xOffset);
	}

	@if type-of($yOffset) != 'list' {
		$yOffset: to-list($yOffset);
	}

	@if type-of($color) != 'list' {
		$color: to-list($color);
	}

	@if type-of($size) != 'list' {
		$size: to-list($size);
	}

	$len: length($color);

	@for $i from $len * -1 through -2 {
		$color: set-nth($color, $i, adjust-hue(nth($color, $i), (abs($i) - 1) * 5));
	}

	$box-shadow: nth($xOffset, 1) nth($yOffset, 1) 0 nth($size, 1) nth($color, 1),
	nth($xOffset, 2) nth($yOffset, 2) 0 nth($size, 2) nth($color, 2),
	nth($xOffset, 3) nth($yOffset, 3) 0 nth($size, 3) nth($color, 3),
	nth($xOffset, 4) nth($yOffset, 4) 0 nth($size, 4) nth($color, 4),
	nth($xOffset, 5) nth($yOffset, 5) 0 nth($size, 5) nth($color, 5);

	box-shadow: $box-shadow;
}

.loading-animation, .loadingmask-message .loadingmask-message-content {
	animation: loading-animation 1.7s infinite ease;
	border-radius: 50%;
	clear: both;
	font-size: $loading-animation-size;
	height: 1em;
	margin: 1em auto;
	overflow: hidden;
	position: relative;
	transform: translateZ(0);
	width: 1em;
}

.loadingmask-content {
	background: #CCC;
}

.loadingmask-message {
	background: transparentize(#FFF, 0.25);
	border-radius: 50%;
	border-width: 0;
	font-size: $loading-animation-size;
	left: 50% !important;
	padding: 0.7em;
	position: absolute;
	top: 50% !important;
	transform: translate(-50%, -50%);

	.loadingmask-message-content {
		background: transparent;
		border-width: 0;
		color: transparent;
		height: 1em;
		margin: 0;
		overflow: hidden;
		padding: 0;
		width: 1em;
	}
}

.overlaymask-hidden .loadingmask-message {
	display: none;
}

@keyframes loading-animation {
	0% {
		@include trailing-shadow(0, -0.83em, $loading-animation-color);

		transform: rotate(0);
	}

	2%, 96% {
		@include trailing-shadow(0, -0.83em);
	}

	10% {
		@include trailing-shadow(
			(0, -0.087em, -0.173em, -0.256em, -0.338em),
			(-0.83em, -0.825em, -0.812em, -0.789em, -0.758em)
		);
	}

	25% {
		@include trailing-shadow(
			(0, -0.338em, -0.555em, -0.671em, -0.719em),
			(-0.83em, -0.758em, -0.617em, -0.488em, -0.415em)
		);
	}

	40% {
		@include trailing-shadow(
			(0, -0.377em, -0.645em, -0.775em, -0.82em),
			(-0.83em, -0.74em, -0.522em, -0.297em, -0.13em),
			adjust-hue($loading-animation-color, 330)
		);
	}

	60% {
		@include trailing-shadow(
			(0, -0.087em, -0.173em, -0.256em, -0.297em),
			(-0.83em, -0.825em, -0.812em, -0.789em, -0.775em)
		);
	}

	100% {
		@include trailing-shadow(0, -0.83em);

		transform: rotate(360deg);
	}
}