.preview-container {
	--cursor-pos-x: 0;
	--cursor-pos-y: 0;

	position: relative;
}

.preview-canvas {
	display: block;
	max-width: 100%;
	height: auto;
	position: relative;
}

.preview-back-btn {
	position: absolute;
	bottom: .75rem;
	left: 2.625rem;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}

.preview-back-btn[preview-back="true"] {
	opacity: 1;
	visibility: visible;
}

.preview-tooltip {
	--tooltip-width: 0%;
	--tooltip-height: 0%;

	background: #fff;

	position: absolute;
	
	top: clamp(0%, calc(var(--cursor-pos-y) * 100%), calc(100% - var(--tooltip-height)));
	left: clamp(0%, calc(var(--cursor-pos-x) * 100%), calc(100% - var(--tooltip-width)));

	z-index: 1;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

.preview-tooltip[preview-tooltip-y="top"] {
	top: clamp(0%, calc(var(--cursor-pos-y) * 100% - var(--tooltip-height)), calc(100% - var(--tooltip-height)));
}

.preview-tooltip[preview-tooltip-y="center"] {
	top: clamp(0%, calc(var(--cursor-pos-y) * 100% - var(--tooltip-height) / 2), calc(100% - var(--tooltip-height)));
}

.preview-tooltip[preview-tooltip-y="bottom"] {
	top: clamp(0%, calc(var(--cursor-pos-y) * 100%), calc(100% - var(--tooltip-height)));
}

.preview-tooltip[preview-tooltip-x="left"] {
	left: clamp(0%, calc(var(--cursor-pos-x) * 100% - var(--tooltip-width)), calc(100% - var(--tooltip-width)));
}

.preview-tooltip[preview-tooltip-x="center"] {
	left: clamp(0%, calc(var(--cursor-pos-x) * 100% - var(--tooltip-width) / 2), calc(100% - var(--tooltip-width)));
}

.preview-tooltip[preview-tooltip-x="right"] {
	left: clamp(0%, calc(var(--cursor-pos-x) * 100%), calc(100% - var(--tooltip-width)));
}

.preview-tooltip[preview-tooltip="true"] {
	opacity: 1;
	visibility: visible;
}