/**
name: Loader
type: ui
desc: >
      Loader it's additional styles which can be added to element if it needed.
      Just add class loader or lightbox-spinner for spinner container. All elements in example are required.
examples:
  - name: Loader
    tmpl: >
        <p class="trailer">Static loader</p>
        <div class="text-center trailer">
        	<div class="loader loader--large">
        		<div class="loader__spinner"><i></i></div>
        	</div>
        </div>

        <div class="loader-test border box--white">
        	<div class="loader loader--centered">
        		<div class="loader__spinner"><i></i></div>
        	</div>
        </div>

        <div class="loader-test border box--yellow">
        	<div class="loader loader--centered">
        		<div class="loader__spinner"><i></i></div>
        	</div>
        </div>

        <div class="loader-test border box--blue">
        	<div class="loader loader--light loader--centered">
        		<div class="loader__spinner"><i></i></div>
        	</div>
        </div>

        <div class="lightbox-spinner-test">
        	<div class="lightbox-spinner"></div>
        </div>

  - name: Loader overlay
    tmpl:
        include: loader-overlay.html
*/

%loader-spinner {
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	text-align: left;
	text-indent: -999px;
	overflow: hidden;
	animation: rotation 0.9s infinite steps(8);
	transition: top 0.2s ease;
	width: 5em;
	height: 5em;

	&:after,
	&:before,
	i:after,
	i:before {
		content: '';
		position: absolute;
		top: 0;
		left: 2.25em;
		width: .5em;
		height: 1.5em;
		border-radius: .2em;
		transform-origin: 50% 2.5em;
	}

	&:before {
		background: rgba(0,0,0,0.5);
		box-shadow: 0 3.5em rgba(0,0,0,1);
	}

	&:after {
		transform: rotate(-45deg);
		background: rgba(0,0,0,0.4);
		box-shadow: 0 3.5em rgba(0,0,0,0.7);
	}

	i {
		display: block;
		height: 100%;
		position: relative;
	}

	i:before {
		transform: rotate(-90deg);
		background: rgba(0,0,0,0.3);
		box-shadow: 0 3.5em rgba(0,0,0,0.6);
	}

	i:after {
		transform: rotate(-135deg);
		background: rgba(0,0,0,0.2);
		box-shadow: 0 3.5em rgba(0,0,0,0.55);
	}
}

%loader-spinner--light {
	&:before {
		background: rgba(255,255,255,0.5);
		box-shadow: 0 3.5em rgba(255,255,255,1);
	}

	&:after {
		background: rgba(255,255,255,0.4);
		box-shadow: 0 3.5em rgba(255,255,255,0.7);
	}

	i:before {
		background: rgba(255,255,255,0.3);
		box-shadow: 0 3.5em rgba(255,255,255,0.6);
	}

	i:after {
		background: rgba(255,255,255,0.2);
		box-shadow: 0 3.5em rgba(255,255,255,0.55);
	}
}

.loader {    
	$root: &;
    position: relative;
	display: inline-block;

	&__spinner {
		@extend %loader-spinner;

		#{$root}__overlay--dark &,
		#{$root}--light & {
			@extend %loader-spinner--light;
		}

		//#{$root}--large & {
		//	font-size: 6px;
		//}
	}

	// Styles for aligment
	&--centered {
		@extend %icon-absolute-center;
	}

	&__static-wrap {
		height: 120px;
	}

	// overlays
	&__overlay {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		display: none;
		background: rgba(255,255,255,0.9);

		#{$root}--busy-mode & {
			display: block;
		}
	}
}

// Lightbox spinner
.lightbox-spinner {
	font-size: 12px;
	position: absolute;
    left:50%;
    top:50%;
	text-indent: -9999em;
	border-top: 0.9em solid $color-telenor-blue;
	border-right: 0.9em solid $color-telenor-blue;
	border-bottom: 0.9em solid transparent;
	border-left: 0.9em solid transparent;
	animation: rotation 1.1s infinite linear;
	border-radius: 50%;
	width: 10em;
	height: 10em;
    margin-left:-5em;
    margin-top:-5em;
}

// animations
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

// Styles for documentation example
.loader-test {
	position: relative;
	width: 100px;
	height: 50px;
	margin: 0 0 30px;
}

.lightbox-spinner-test {
    position: relative;
	width: 100%;
	height: 400px;
	background: rgba(0, 0, 0, .75);
	/*display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;*/
}