src/static/scripts/components/misc/animatedFullscreen/_animatedFullscreen.scss
@use "../../../../style/vars";

@keyframes fullscreenInAnimation {
	from {
		width: var(--init-width);
		height: var(--init-height);
		top: var(--init-top);
		left: var(--init-left);
	}

	to {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}

@keyframes fullscreenOutAnimation {
	from {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	to {
		width: var(--init-width);
		height: var(--init-height);
		top: var(--init-top);
		left: var(--init-left);
	}
}

.animatedFullscreen {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	width: 100%;
	height: 100%;
	--init-width: 0px;
	--init-height: 0px;
	--init-top: 0px;
	--init-left: 0px;

	> * {
		position: fixed;
	}

	&.initial > * {
		width: var(--init-width);
		height: var(--init-height);
		top: var(--init-top);
		left: var(--init-left);
	}

	&.fullscreen > * {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	&.animateIn > * {
		background: vars.$background-el1;
		animation: fullscreenInAnimation 200ms ease forwards;
	}

	&.animateOut > * {
		background: vars.$background-el1;
		animation: fullscreenOutAnimation 200ms ease forwards;
	}
}

.fullscreenPlaceholder {
	--width: 0;
	--height: 0;
	width: var(--width);
	height: var(--height);
}
