.edit-site-canvas-loader {
	// TODO: Use design tokens with ThemeProvider.
	--wp-components-color-foreground: var(--color);

	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	align-items: center;
	justify-content: center;

	@media not (prefers-reduced-motion) {
		animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
		animation-fill-mode: forwards;
	}
}

@keyframes edit-site-canvas-loader__fade-in-animation {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}