.loader
{
	--block-size: 8vmin;
	--loader-size: calc(var(--block-size) / 2);
	--loader-size-half: calc(var(--loader-size) / 2);
	--loader-size-half-neg: calc(var(--loader-size-half) * -1);
	--light-color: rgba(255, 255, 255, 0.3);
	--dot-size: 5px;
	--dot-size-half: calc(var(--dot-size) / 2);
	--dot-size-half-neg: calc(var(--dot-size-half) * -1);

	display: inherit;
	/* position: relative; */
	width: var(--loader-size);
	color: white;
}

.loader::before,
.loader::after
{
	content: '';
	position: absolute;
}

/**
	loader--1
**/
.loader--1
{
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 1s;
	--loader-1-dist: calc(var(--loader-size) - var(--dot-size-half) + 1px);
	aspect-ratio: 1 / 1;
	border: 1px solid var(--light-color);
}

.loader--1::before,
.loader--1::after
{
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	top: var(--dot-size-half-neg);
	left: var(--dot-size-half-neg);
	animation: loader-1 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}

.loader--1::after
{
	animation-delay: calc(var(--anim-duration) / 4 * -1);
}

@keyframes loader-1
{

	0%,
	100%
	{
		transform: none;
	}

	25%
	{
		transform: translateX(var(--loader-1-dist));
	}

	50%
	{
		transform: translateX(var(--loader-1-dist)) translateY(var(--loader-1-dist));
	}

	75%
	{
		transform: translateX(0) translateY(var(--loader-1-dist));
	}
}

/**
	loader--2
**/
.loader--2
{
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 1s;
	height: 1px;
	background-color: var(--light-color);
}

.loader--2::before,
.loader--2::after
{
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	top: calc(var(--dot-size-half-neg) + 1px);
	left: var(--dot-size-half-neg);
	animation: loader-2 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}

.loader--2::after
{
	animation-delay: calc(var(--anim-duration) / 3 * -1)
}

@keyframes loader-2
{

	0%,
	100%
	{
		transform: none;
	}

	44%
	{
		transform: translateX(calc(var(--loader-size) + var(--dot-size-half)));
	}
}

/**
	loader--3
**/
.loader--3
{
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 1.2s;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--light-color);
	border-radius: 50%;
	animation: loader-3 calc(var(--anim-duration) * 3) linear infinite;
}

.loader--3::before,
.loader--3::after
{
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	top: var(--dot-size-half-neg);
	left: calc(50% - var(--dot-size-half));
	animation: loader-3 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
	transform-origin: center calc(var(--loader-size-half) + var(--dot-size-half) - 1px);
}

.loader--3::after
{
	animation-delay: calc(var(--anim-duration) / 3 * -1);
}

@keyframes loader-3
{
	100%
	{
		transform: rotate(1turn);
	}
}

/**
	loader--4
**/
.loader--4
{
	--anim-duration: 0.5s;
	aspect-ratio: 1 / 1;
	perspective: 50vmin;
	transform-style: preserve-3d;
	transform: rotateX(55deg);
}

.loader--4::before,
.loader--4::after
{
	width: 50%;
	aspect-ratio: 1 / 1;
	border: 1px solid currentColor;
	top: 25%;
	left: 25%;
	border-radius: 50%;
	animation: loader-4 var(--anim-duration) cubic-bezier(0.07, 0.59, 0.56, 0.88) infinite;
}

.loader--4::after
{
	animation-delay: calc(var(--anim-duration) / 2 * -1);
}

@keyframes loader-4
{
	0%
	{
		transform: scale(0.2) translateZ(-8vmin);
	}

	0%,
	100%
	{
		opacity: 0;
	}

	66%
	{
		opacity: 0.8;
		transform: scale(1.2) translateZ(6vmin);
	}

	100%
	{
		transform: scale(1.8) translateZ(2vmin);
	}
}

/**
	loader--5
**/
.loader--5
{
	--tilt-deg: 40deg;
	--anim-duration: 0.6s;
	aspect-ratio: 1 / 1;
	perspective: 50vmin;
	transform-style: preserve-3d;
	animation: loader-5-1 calc(var(--anim-duration) * 3) linear alternate-reverse infinite;
}

.loader--5::before,
.loader--5::after
{
	width: 50%;
	aspect-ratio: 1 / 1;
	background-color: currentColor;
	top: 25%;
	left: 25%;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	animation: loader-5 var(--anim-duration) cubic-bezier(0.07, 0.59, 0.56, 0.88) infinite;
}

.loader--5::before
{
	--turn-deg: 360deg;
}

.loader--5::after
{
	--turn-deg: 410deg;
	animation-delay: calc(var(--anim-duration) / 1.8 * -1);
}

@keyframes loader-5
{
	0%
	{
		transform: scale(0.3) translateZ(-5vmin);
	}

	0%,
	100%
	{
		opacity: 0;
	}

	66%
	{
		opacity: 0.8;
		transform: scale(1.2) translateZ(5vmin) rotate(var(--turn-deg));
	}

	100%
	{
		transform: scale(1) translateZ(3vmin) rotate(calc(var(--turn-deg) * 1.2));
	}
}

@keyframes loader-5-1
{
	0%
	{
		transform: rotateX(var(--tilt-deg)) rotateY(-15deg);
	}

	100%
	{
		transform: rotateX(var(--tilt-deg)) rotateY(15deg);
	}
}

/**
	loader--6
**/
.loader--6
{
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 0.6s;
	aspect-ratio: 1 / 1;
	perspective: 50vmin;
	transform-style: preserve-3d;
	transform: rotateX(35deg);
}

.loader--6::before,
.loader--6::after
{
	width: 50%;
	aspect-ratio: 1 / 1;
	background-color: currentColor;
	top: 25%;
	left: 25%;
	animation: loader-6 var(--anim-duration) cubic-bezier(0.07, 0.59, 0.56, 0.88) infinite;
}

.loader--6::before
{
	--turn-deg: -60deg;
	--x-dist: -25%;
	transform-origin: left calc(var(--loader-size) * -1);
}

.loader--6::after
{
	--turn-deg: 60deg;
	--x-dist: 25%;
	transform-origin: right calc(var(--loader-size) * -1);
	animation-delay: calc(var(--anim-duration) / 2 * -1);
}

@keyframes loader-6
{
	0%
	{
		transform: scale(0.3) translateZ(-15vmin) rotateY(calc(var(--turn-deg) * -1));
	}

	0%,
	100%
	{
		opacity: 0;
	}

	33%
	{
		opacity: 0.8;
		transform: scale(1.2) translateZ(5vmin) translateX(var(--x-dist));
	}

	100%
	{
		transform: scale(1.2) translateZ(5vmin) translateX(var(--x-dist)) rotateY(var(--turn-deg));
	}
}

/**
	loader--7
**/
.loader--7
{
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 0.8s;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--light-color);
	border-radius: 50%;
	animation: loader-7 calc(var(--anim-duration) * 2) linear infinite;
}

.loader--7::before,
.loader--7::after
{
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	top: calc(50% - var(--dot-size-half));
	left: calc(50% - var(--dot-size-half));
	animation: loader-7-1 var(--anim-duration) cubic-bezier(0.32, 0.41, 0.3, 1.87) infinite;
}

.loader--7::after
{
	animation-name: loader-7-2;
	animation-delay: calc(var(--anim-duration) / 3 * -1);
}

@keyframes loader-7
{
	100%
	{
		transform: rotate(1turn);
	}
}

@keyframes loader-7-1
{

	0%,
	100%
	{
		transform: translateX(var(--loader-size-half-neg));
	}

	55%
	{
		transform: translateX(var(--loader-size-half));
	}
}

@keyframes loader-7-2
{

	0%,
	100%
	{
		transform: translateY(var(--loader-size-half-neg));
	}

	55%
	{
		transform: translateY(var(--loader-size-half));
	}
}

/**
	loader--8
**/
.loader--8
{
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 0.8s;
	aspect-ratio: 1 / 1;
	border: 1px dashed var(--light-color);
	border-radius: 50%;
	perspective: 50vmin;
	transform-style: preserve-3d;
	transform: rotateX(45deg) rotateY(15deg);
}

.loader--8::before,
.loader--8::after
{
	animation: loader-8 var(--anim-duration) cubic-bezier(0.39, 0.24, 0, 0.99) infinite;
}

.loader--8::before
{
	--z-dist: 8vmin;
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	top: calc(50% - var(--dot-size-half));
	left: calc(50% - var(--dot-size-half));
	animation-delay: calc(var(--anim-duration) / 4 * -1);
}

.loader--8::after
{
	--z-dist: 4vmin;
	width: 65%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 1px solid currentColor;
}

@keyframes loader-8
{

	0%,
	100%
	{
		transform: translateZ(calc(var(--z-dist) * -1)) scale(0.6);
	}

	55%
	{
		transform: translateZ(var(--z-dist));
	}
}


/**
	loader--9
**/
.loader--9
{
	--loader-size: calc(var(--block-size) / 6);
	--anim-duration: 0.6s;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: currentColor;
	box-shadow: 0 0 var(--loader-size) var(--light-color);
	animation: loader-9 calc(var(--anim-duration) * 6) linear infinite;
}

.loader--9::before,
.loader--9::after
{
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	animation: loader-9-1 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}

.loader--9::before
{
	--x-dist: 0;
	--y-dist: var(--loader-size-half);
	bottom: calc(100% + var(--loader-size));
	left: calc(50% - var(--dot-size-half));
	transform-origin: center var(--loader-size);
}

.loader--9::after
{
	--x-dist: var(--loader-size-half);
	--y-dist: 0;
	top: calc(50% - var(--dot-size-half));
	right: calc(100% + var(--loader-size));
	transform-origin: var(--loader-size) center;
	animation-delay: calc(var(--anim-duration) / 2 * -1);
}

@keyframes loader-9
{
	100%
	{
		transform: rotate(1turn);
	}
}

@keyframes loader-9-1
{

	0%,
	100%
	{
		opacity: 0;
	}

	33%
	{
		opacity: 1;
	}

	0%
	{
		transform: scale(1.1);
	}

	88%
	{
		transform: rotate(180deg) translate(var(--x-dist), var(--y-dist));
	}
}

/**
	miscs
**/

.loading_item
{
	background: rgba(255, 255, 255, 0.1);
	display: grid;
	place-items: center;
	border-radius: 4px;
	transition: opacity 0.4s ease;
}



/*
*,
*::before,
*::after
{
	box-sizing: border-box;
}
*/