// ------------------------------------------------------------------------------------------------
// LOADER
// ------------------------------------------------------------------------------------------------

// @extend %xts-loader;

%xts-loader {
	position: absolute;
	width: 70px;
	height: 70px;

	&:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		-webkit-animation: woodmart_rotate 1s linear infinite;
		animation: woodmart_rotate 1s linear infinite;
	}

	&:first-child {
		transform: skew(30deg, 20deg);
	}

	&:last-child {
		transform: skew(-30deg, -20deg) scale(-1, 1);

		&:before {
			animation-delay: -.5s;
		}
	}
}

// ------------------------------------------
// DEFAULT LOADER
// ------------------------------------------

.xts-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	visibility: hidden;
	width: 70px;
	height: 70px;
	opacity: 0;
	transition: all .3s ease;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	.xts-loading & {
		visibility: visible;
		opacity: 1;
	}
}

.xts-loader-el {
	@extend %xts-loader;

	&:before {
		background-image: url(../images/loader/xts-loader.svg);
	}
}

// ------------------------------------------
// BACKGROUND LOADER
// ------------------------------------------

.xts-loader-wrapper {
	z-index: 20;
	// display: none;
	visibility: hidden;
	background: rgba(255, 255, 255, .8);
	opacity: 0;
	transition: all .3s ease;

	@extend %xts-fill;

	// .xts-loader {
	// 	position: sticky;
	// 	-webkit-transform: translate(-50%, 20px);
	// 	transform: translate(-50%, 20px);
	// }

	// > p {
	// 	position: sticky;
	// 	top: 50%;
	// 	left: 50%;
	// 	display: inline-block;
	// 	font-size: 16px;
	// 	-webkit-transform: translate(-50%, 100px);
	// 	transform: translate(-50%, 100px);
	// 	-webkit-animation: flickerAnimation 2s infinite;
	// 	animation: flickerAnimation 2s infinite;
	// }

	.xts-loading & {
		// display: block;
		visibility: visible;
		opacity: 1;
	}
}

//**** CSS GENERATOR ****//

.wd-box {

	.xts-loader-wrapper {
		background: rgba(0, 0, 0, .8);

		.xts-loader {
			position: sticky;
			top: 50%;
			left: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			-webkit-transform: none;
			transform: none;
		}

		> p {
			position: sticky;
			top: calc(50% + 80px);
			left: 0;
			width: 100%;
			color: #FFF;
			text-align: center;
			font-size: 16px;
			// transform: translateY(-50%);
			-webkit-animation: flickerAnimation 2s infinite;
			animation: flickerAnimation 2s infinite;
		}

		.xts-loader-el {

			&:before {
				background-image: url(../images/loader/xts-loader-light.svg);
			}
		}
	}
}

// ------------------------------------------
// WHB LOADER
// ------------------------------------------

.whb-loader {
	z-index: 2;
	display: flex;
	// display: none;
	align-items: center;
	justify-content: center;
	margin: -20px;
	background: rgba(0, 0, 0, .8);
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;

	@extend %xts-fill;

	&.whb-loading {
		// display: flex;
		visibility: visible;
		opacity: 1;
	}
}

.whb-loading-icon {
	margin: auto auto 10px;
	width: 70px;
	height: 70px;
}

.whb-loading-circle {
	@extend %xts-loader;

	&:before {
		background-image: url(../images/loader/xts-loader-light.svg);
	}
}

.whb-loading-text {
	color: #FFF;
	font-size: 16px;
	-webkit-animation: flickerAnimation 2s infinite;
	animation: flickerAnimation 2s infinite;
}