@use 'colors' as *;
@use '../base/merlin' as *;

/* Loader Styles start here */
.loader-wrapper {
	--line-width: 5px;
	--curtain-color: #eee;
	--outer-line-color: #{$black};
	--middle-line-color: #{$secondary-color};
	--inner-line-color: #{$primary-color};
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
}

.loader {
	display: block;
	position: relative;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border: var(--line-width) solid transparent;
	border-top-color: var(--outer-line-color);
	border-radius: 100%;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	z-index: 1001;
}

.loader:before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border: var(--line-width) solid transparent;
	border-top-color: var(--inner-line-color);
	border-radius: 100%;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}

.loader:after {
	content: "";
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	bottom: 14px;
	border: var(--line-width) solid transparent;
	border-top-color: var(--middle-line-color);
	border-radius: 100%;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.loader-wrapper .loader-section {
	position: fixed;
	top: 3rem;
	background: var(--curtain-color);
	width: 51%;
	height: calc(100% - 3rem);
	z-index: 1000;
}

.loader-wrapper .loader-section.section-left {
	left: 0
}

.loader-wrapper .loader-section.section-right {
	right: 0;
}

/* Loaded Styles */
.loaded .loader-wrapper .loader-section.section-left {
	transform: translateX(-100%);
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded .loader-wrapper .loader-section.section-right {
	transform: translateX(100%);
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded .loader {
	opacity: 0;
	transition: all 0.3s ease-out;
}

.loaded .loader-wrapper {
	visibility: hidden;
	transform: translateY(-100%);
	transition: all .3s 1s ease-out;
}

body {
	overflow: hidden;

	main {
		opacity: 0;
		transition-property: opacity;
		@extend .transition;
	}


	&.loaded {
		overflow: auto;

		main {
			opacity: 1;
		}
	}

	&.overflow-hidden {
		overflow: hidden;
	}
}

.roller-loader {
	display: flex;
	justify-content: center;
	width: calc(100% - 80px);
	height: 100%;
	top: -40px;
	left: 0;
	align-items: center;
	position: absolute;
	margin: 0 auto;
	z-index: 2;

	div {
		transform-origin: 40px 40px;
		display: block;
		animation: animation-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

		&:after {
			content: " ";
			display: block;
			position: absolute;
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: var(--primary-color);
			margin: -4px 0 0 -4px;
		}

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

			&:after {
				top: 63px;
				left: 63px;
			}
		}

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

			&:after {
				top: 68px;
				left: 56px;
			}
		}

		&:nth-child(3) {
			animation-delay: -0.108s;

			&:after {
				top: 71px;
				left: 48px;
			}
		}

		&:nth-child(4) {
			animation-delay: -0.144s;

			&:after {
				top: 72px;
				left: 40px;
			}
		}


		&:nth-child(5) {
			animation-delay: -0.18s;

			&:after {
				top: 71px;
				left: 32px;
			}
		}


		&:nth-child(6) {
			animation-delay: -0.216s;

			&:after {
				top: 68px;
				left: 24px;
			}
		}


		&:nth-child(7) {
			animation-delay: -0.252s;

			&:after {
				top: 63px;
				left: 17px;
			}
		}


		&:nth-child(8) {
			animation-delay: -0.288s;

			&:after {
				top: 56px;
				left: 12px;
			}
		}
	}
}

@keyframes animation-roller {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}