.loader {
	display: flex;
	align-items: center;
	justify-content: center;

	&__spinner {
		height: 3rem;
		width: 3rem;
		border-radius: 100rem;

		position: relative;
		animation: esSpinnerRotate 0.8s linear infinite;

		&::before {
			content: '';
			box-sizing: border-box;
			position: absolute;
			inset: 0;
			border-radius: 50%;
			border: var(--loader-thickness, 0.25rem) solid var(--loader-color, var(--global-colors-primary500, currentColor));
			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
		}

		&::after {
			content: '';
			box-sizing: border-box;
			position: absolute;
			inset: 0;
			border-radius: 50%;
			border: var(--loader-thickness, 0.25rem) solid var(--loader-color, var(--global-colors-primary500, currentColor));
			opacity: 0.1;
		}
	}

	&--use-overlay {
		--loader-color: var(--global-colors-white);

		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		z-index: 100;

		background-color: rgb(16 16 16 / 0.9);
		color: var(--global-colors-white);

		@supports (backdrop-filter: blur(0.25rem)) {
			backdrop-filter: blur(0.25rem);
		}
	}
}

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