// Miniature level schematic filling a level-select node. Only geometry/appearance here; colours and
// positions are applied inline by LevelNodePreview.razor from the built LevelPreviewModel.
@import "Theme.scss";

.level-preview {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;

	.playfield-pattern {
		position: absolute;
		background-repeat: repeat;
	}

	.bg-layer {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.static-thumbnail {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		image-rendering: pixelated;
	}

	.bg-block {
		position: absolute;
	}

	.prect {
		position: absolute;
		background-repeat: no-repeat;
	}

	.game-block {
		position: absolute;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		image-rendering: pixelated;
	}

	// Ordinal map tag in the top-left corner. Semitransparent so it reads as an overlay label without
	// obscuring the schematic. Sized as a fraction of the node so it scales with the preview.
	.tag {
		position: absolute;
		left: 8%;
		top: 1%;
		font-family: $font;
		font-size: 26px;
		color: rgba( white, 0.8 );
		text-stroke: 4px rgba( black, 0.5 );
		pointer-events: none;
		letter-spacing: 2px;
	}
}