app-loading {
	--app-loading-color: var(--color-blue);
	--app-loading-delay-threshold: 0.2s;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition-property: opacity, z-index;
	transition-duration: 0.5s;
	transition-delay: var(--app-loading-delay-threshold);
}

app-loading.on {
	z-index: 9999;
	opacity: 1;
}

app-loading > div:after {
	content: " ";
	display: block;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: solid 6px;
	border-color: var(--app-loading-color) transparent var(--app-loading-color) transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}