:root{
	--xtfw-spinner-overlay: rgba(255, 255, 255, 0.5);
	--xtfw-spinner-color: #ddd;
	--xtfw-spinner-size: 30px;
	--xtfw-spinner-border-size: 3px;
}

.xtfw-spinner {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--xtfw-spinner-overlay);
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transition: opacity .2s;

	&.active {
		opacity: 1;
		visibility: visible;
		z-index: 99;
	}

	.xtfw-spinner-inner {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		width: var(--xtfw-spinner-size);
		height: var(--xtfw-spinner-size);

		span {
			box-sizing: border-box;
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			border: var(--xtfw-spinner-border-size) solid var(--xtfw-spinner-color);
			border-radius: 50%;
			animation: xtfw-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
			border-color: var(--xtfw-spinner-color) transparent transparent transparent;

			&:nth-child(1) {
				animation-delay: -0.45s;
			}

			&:nth-child(2) {
				animation-delay: -0.3s;
			}

			&:nth-child(3) {
				animation-delay: -0.15s;
			}
		}
	}
}
@keyframes xtfw-spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}