.bc-loading {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;

	&.fixed {
		position: fixed;
	}

	&.inline {
		position: relative;
		top: 0;
		left: 75px;
		width: 150px;
		height: 150px;
	}

	&.active {
		display: block;
	}

	&.minimal {
		& > div {
			border: 0;
			background: none;
			box-shadow: none;
		}
	}

	& > div {
		@include bc-box-sizing;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 150px;
		height: 150px;
		margin: -75px 0 0 -75px;
		border: 1px solid $bc-color-5;
		border-radius: 3px;
		background: $bc-color-7;
		box-shadow: 0 3px 10px -3px $bc-color-17;

		& > svg {
			@include bc-box-sizing;
			position: absolute;
			top: 0;
			left: 0;

			&.spin {
				@include bc-animation('bc-spin 700ms infinite linear');
			}
		}

		& > span {
			@include bc-box-sizing;
			@include bc-transform(translateY(-50%));
			position: absolute;
			top: 50%;
			padding: 0;
			color: $bc-color-12;
			font: 25px/1 $ft-norm;
			text-align: center;
		}
	}
}

@mixin bc-keyframes($animation-name) {
	@-webkit-keyframes #{$animation-name} { @content; }
	@-moz-keyframes #{$animation-name} { @content; }
	@-ms-keyframes #{$animation-name} { @content; }
	@-o-keyframes #{$animation-name} { @content; }
	@keyframes #{$animation-name} { @content; }
}

/*!
 * animations
 */

@include bc-keyframes(bc-spin) {
	0%   {@include bc-vendorize(transform, rotate(0deg));}
	100% {@include bc-vendorize(transform, rotate(360deg));}
}

@include bc-keyframes(bc-spin-counter) {
	0%   {@include bc-vendorize(transform, rotate(0deg));}
	100% {@include bc-vendorize(transform, rotate(-360deg));}
}