/* Em: Styles taken from Luigi's shared code and adapted for our theme */

:root {
	--loader-duration: 2.8s;
	--loader-ease-type: ease-in-out;

	&[data-theme='light'] {
		--base-purple-main: #6b38fb;
	}

	&[data-theme='dark'] {
		--base-purple-main: #865cff;
	}
}

.widget-box {
	width: 200px;
	height: 200px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cut-wrap {
	width: 140px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.anima_wrapper {
	width: 140px;
	height: 140px;
	display: flex;
	flex-wrap: wrap;
}

.anima_wrapper .dotwrap {
	width: 20%;
	height: 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	scale: 0.235;
}

.anima_wrapper .dotwrap .dot {
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background: var(--base-purple-main);
	display: block;
}

/*dots 1 3 5 11 13 15 21 13 25 keyframes*/
@keyframes dot-1 {
	0% {
		scale: 1;
	}
	14% {
		scale: 2;
	}
	28% {
		scale: 1;
	}
	42% {
		scale: 3.7;
	}
	56% {
		scale: 2;
	}
	70% {
		scale: 1;
	}
	84% {
		scale: 3.7;
	}
	100% {
		scale: 1;
	}
}

.loader.animated .dotwrap:nth-child(1) .dot,
.loader.animated .dotwrap:nth-child(3) .dot,
.loader.animated .dotwrap:nth-child(5) .dot,
.loader.animated .dotwrap:nth-child(11) .dot,
.loader.animated .dotwrap:nth-child(13) .dot,
.loader.animated .dotwrap:nth-child(15) .dot,
.loader.animated .dotwrap:nth-child(21) .dot,
.loader.animated .dotwrap:nth-child(23) .dot,
.loader.animated .dotwrap:nth-child(25) .dot {
	animation: dot-1 var(--loader-duration) infinite var(--loader-ease-type);
}

/*dot 2 4 6 10 16 20 22 24 keyframes*/
@keyframes dot-2 {
	0% {
		scale: 1;
	}
	14% {
		scale: 1;
	}
	28% {
		scale: 3.7;
	}
	42% {
		scale: 1;
	}
	56% {
		scale: 1;
	}
	70% {
		scale: 3.7;
	}
	84% {
		scale: 1;
	}
	100% {
		scale: 1;
	}
}

.loader.animated .dotwrap:nth-child(2) .dot,
.loader.animated .dotwrap:nth-child(4) .dot,
.loader.animated .dotwrap:nth-child(6) .dot,
.loader.animated .dotwrap:nth-child(10) .dot,
.loader.animated .dotwrap:nth-child(16) .dot,
.loader.animated .dotwrap:nth-child(20) .dot,
.loader.animated .dotwrap:nth-child(22) .dot,
.loader.animated .dotwrap:nth-child(24) .dot {
	animation: dot-2 var(--loader-duration) infinite var(--loader-ease-type);
}

/*dot 7 9 17 19 keyframes*/
@keyframes dot-7 {
	0% {
		scale: 1;
	}
	14% {
		scale: 2.35;
	}
	28% {
		scale: 2.5;
	}
	42% {
		scale: 2.35;
	}
	56% {
		scale: 2.35;
	}
	70% {
		scale: 2.5;
	}
	84% {
		scale: 2.35;
	}
	100% {
		scale: 1;
	}
}

.loader.animated .dotwrap:nth-child(7) .dot,
.loader.animated .dotwrap:nth-child(9) .dot,
.loader.animated .dotwrap:nth-child(17) .dot,
.loader.animated .dotwrap:nth-child(19) .dot {
	animation: dot-7 var(--loader-duration) infinite var(--loader-ease-type);
}

/*dot 8 12 14 18 keyframes*/
@keyframes dot-8 {
	0% {
		scale: 1;
	}
	14% {
		scale: 3.7;
	}
	28% {
		scale: 1.7;
	}
	42% {
		scale: 1;
	}
	56% {
		scale: 3.7;
	}
	70% {
		scale: 1.7;
	}
	84% {
		scale: 1;
	}
	100% {
		scale: 1;
	}
}

.loader.animated .dotwrap:nth-child(8) .dot,
.loader.animated .dotwrap:nth-child(12) .dot,
.loader.animated .dotwrap:nth-child(14) .dot,
.loader.animated .dotwrap:nth-child(18) .dot {
	animation: dot-8 var(--loader-duration) infinite var(--loader-ease-type);
}