@use '../utils' as *;

/*----------------------------------------*/
/*  2.20 preloader CSS START
/*----------------------------------------*/
#loading {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 999999;
	margin-top: 0px;
	top: 0px;
	background-color: var(--bd-white);
	&-center {
		width: 100%;
		height: 100%;
		position: relative;
		&-absolute {
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		
			@media #{$xl,$lg} {
				width: 40%;
			}
		
			@media #{$md} {
				width: 45%;
			}
		
			@media #{$sm} {
				width: 50%;
			}
		
			@media #{$xs} {
				width: 90%;
			}
		}
	}
}
.bd-preloader {
	&-logo {
		width: 180px;
		height: 180px;
		line-height: 180px;
		position: relative;
		text-align: center;
		margin: auto;
		& img {
			vertical-align: middle;
		}
	}
	&-circle {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		& svg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include animation((bd-rotate 5s linear infinite));
			& circle {
				&:last-child {
					stroke: var(--bd-primary);
					stroke-dashoffset: 0;
					stroke-dasharray: 1128, 3150;
					@include animation((bd-loading 4s linear infinite));
					transform-origin: center center;
					@at-root {
						@include keyframes(bd-loading) {
							0% {
								stroke-dashoffset: 0;
								stroke-dasharray: 0, 3150;
							}
							100% {
								stroke-dashoffset: -1131;
								stroke-dasharray: 1128, 3138;
							}
						}
						@include keyframes(bd-rotate) {
							0% {
								@include transform(rotate(0deg));
							}
							100% {
								@include transform(rotate(360deg));
							}
						}
					}
				}
			}
		}
	}
	&-content {
		text-align: center;
	}
	&-subtitle {
		font-size: 20px;
		margin-bottom: 0;
		color: var(--bd-black);
		margin-top: 20px;
	}
}