src/static/scripts/components/photon/tutorial/_tutorial.scss
@use "../../../../style/vars";

.tutorial {
	position: fixed;
	z-index: 100;
	top: 0;
	--top-space: 0;
	--right-space: 0;
	--left-space: 0;
	--bottom-space: 0;

	.blocker {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: vars.$background;
		opacity: .75;
		transition: all .25s ease;

		&.top {
			bottom: calc(100% - var(--top-space));
		}

		&.right {
			top: var(--top-space);
			left: calc(100% - var(--right-space));
			bottom: var(--bottom-space);
		}

		&.bottom {
			top: calc(100% - var(--bottom-space));
		}

		&.left {
			top: var(--top-space);
			right: calc(100% - var(--left-space));
			bottom: var(--bottom-space);
		}
	}

	.highlightWindow {
		position: fixed;
		top: var(--top-space);
		right: var(--right-space);
		bottom: var(--bottom-space);
		left: var(--left-space);
		border: 3px solid vars.$primary;
		border-radius: vars.$border-radius;
		transition: all .25s ease;
	}

	.buttonBar {
		position: fixed;
		bottom: 1rem;
		left: 1rem;
		right: 1rem;
		height: 3rem;
		display: flex;
		gap: 1rem;

		.navButton {
			background: vars.$background-el1;
			font-size: 1.5rem;
			padding: 0 1rem;
			border-radius: vars.$border-radius;
			transition: all .25s ease;
			border: 1px solid vars.$border-color;

			&.nextButton {
				background: vars.$primary-contrast;
				color: vars.$text-on-primary;
				border: none;
			}

			&.prevButton {
				margin-left: auto;
			}

			&:hover {
				filter: brightness(1.5);
			}

			&.remove {
				visibility: hidden;
			}
		}
	}

	.stepText {
		max-width: 45rem;
		position: fixed;
		left: 1rem;
		right: 1rem;

		&.BL, &.BR {
			bottom: 5rem;
		}

		&.BR {
			text-align: right;
		}

		&.TL, &.TR {
			top: 5rem;
		}

		&.TR {
			text-align: right;
		}

		* {
			font-size: 1.75rem;
			text-shadow:  
				0 0 30px vars.$background,
				0 0 20px vars.$background,
				0 0 15px vars.$background,
				0 0 10px vars.$background,
				0 0 5px vars.$background;
			line-break: auto;
		}
	}

	&.isFirst {
		.prevButton {
			visibility: hidden;
		}
	}

	&.isLast {
		.nextButton {
			display: none;
		}

		.finishButton {
			background: vars.$primary-contrast;
			color: vars.$text-on-primary;
			order: 2;
		}
	}
}
