#loading-screen {
	--clr-loading-screen: gray;
	--clr-loading-screen-to: gray;

	display: none;
	position: fixed;
	width: 100vw; height: 100vh;
	top: 0; left: 0;
	overflow: hidden;
	z-index: 9999;
	
	background-color: var(--clr-loading-screen);
	background: url("/assets/site/theme-switcher-transition-icon.png") var(--clr-loading-screen);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;

	transition: .5s linear;
	transition-property: background-color;
	transition-behavior: allow-discrete;
	@starting-style {
		opacity: 0;
	}

	/*For transition screen icon (display gets set to flex when the transition is happening)*/
	justify-content: center;
	align-content: center;

	img {
		margin: auto;
		max-width: 100vw;
		max-height: 100vh;
		opacity: 0;

		&::selection {
			background-color: none;
		}
	}
}