body:is([data-mode^="login"], [data-mode="logout"]){

	--login-page-background-image: none;

	--bg1: '';
	--bg2: '';
	--fade-out-duration: 2000;

	position: relative;

	&::before, &::after {
		content: '';
		position: fixed;
		inset: 0;
		pointer-events: none;

		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		z-index: -1;
	}

	&::before {
		background-image: var(--bg1);
	}
	&::after {
		background-image: var(--bg2);
	}

	&.before {
		&::before {
			z-index: -1;
			opacity: 1;
		}
		&::after {
			z-index: -2;
			opacity: 1;
		}
	}
	&.after {
		&::before {
			z-index: -2;
			opacity: 1;
		}
		&::after {
			z-index: -1;
			opacity: 1;
		}
	}
	&.swap-bg {
		&.before {
			&::before {
				animation: loginAnimatedBgSwap calc(var(--fade-out-duration) * 1ms) ease-in forwards;
			}
		}
		&.after {
			&::after {
				animation: loginAnimatedBgSwap calc(var(--fade-out-duration) * 1ms) ease-in forwards;
			}
		}
	}
}

@keyframes loginAnimatedBgSwap {
	100% {
		opacity: 0;
	}
}