@import "ansyn/less/common";
@import "ansyn/less/z-index-globals";

:host {
	position: absolute;
	background: transparent;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: @z-index-imagery-loader;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	pointer-events: none;
	flex-direction: column;

	&.show {
		visibility: visible;
	}

	.loader {
		position: relative;
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.loader-1 .loader-outter {
		position: absolute;
		border: 4px solid @application-primary-color;
		border-left-color: transparent;
		border-bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
	}

	.loader-1 .loader-inner {
		position: absolute;
		border: 4px solid @application-contrast-color;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		left: calc(~'50% - 20px');
		top: calc(~'50% - 20px');
		border-right: 0;
		border-top-color: transparent;
		animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
	}

	.text {
		margin-top: 10px;
		font-size: medium;

		span {
			font-size: large;
			animation-name: blink;
			animation-duration: 1.4s;
			animation-iteration-count: infinite;
			animation-fill-mode: both;
		}

		span:nth-child(2) {
			animation-delay: .2s;
		}

		span:nth-child(3) {
			animation-delay: .4s;
		}
	}

	@keyframes loader-1-outter {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loader-1-inner {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(-360deg);
		}
	}

	@keyframes blink {
		0% {
			opacity: .2;
		}
		20% {
			opacity: 1;
		}
		100% {
			opacity: .2;
		}
	}
}

:ansyn-animated-ellipsis {
z-index: 1000;
}
