@import '../../../theme/color';

.loader-container {
	background-color: $aeap-color-black-thin;
	.loader {
		-ms-transform: translateZ(0);
		-webkit-animation: load1 1s infinite ease-in-out;
		-webkit-animation-delay: -0.16s;
		-webkit-transform: translateZ(0);
		animation: load1 1s infinite ease-in-out;
		animation-delay: -0.16s;
		background: $aeap-color-blue;
		color: $aeap-color-blue;
		height: 4rem;
		text-indent: -9999rem;
		transform: translateZ(0);
		width: 1rem;
		&::after {
			-webkit-animation: load1 1s infinite ease-in-out;
			animation: load1 1s infinite ease-in-out;
			background: $aeap-color-blue;
			content: '';
			height: 4rem;
			left: 1.5rem;
			position: absolute;
			top: 0;
			width: 1rem;
		}

		&::before {
			-webkit-animation: load1 1s infinite ease-in-out;
			-webkit-animation-delay: -0.32s;
			animation: load1 1s infinite ease-in-out;
			animation-delay: -0.32s;
			background: $aeap-color-blue;
			content: '';
			height: 4rem;
			left: -1.5rem;
			position: absolute;
			top: 0;
			width: 1rem;
		}
	}
}

@keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4rem;
	}

	40% {
		box-shadow: 0 -2rem;
		height: 5rem;
	}
}