main {
	isolation: isolate;
}
#canvasArea {
	position: relative;
	margin: 1em;
}
#canvasHolder {
	position: relative;
	z-index: -1;
	margin: auto;
	width: min(100%, 80vh);
	container-type: size;
	aspect-ratio: 1;
	canvas {
		width: 100%;
		scale: 2;
		/* Interferes with navigation buttons otherwise */
		pointer-events: none;
	}
}
#slider {
	display: block;
	margin: auto;
	width: 75%;
}

#colorHolder {
	position: absolute;
	top: 0;
	left: 0;
	button {
		all: unset;
		display: block;
		color: var(--green-white);
		user-select: none;
		cursor: pointer;

		&:nth-child(2n) {
			margin-right: 2em;
			rotate: -2deg;
		}
		&:nth-child(2n+1) {
			margin-left: 2em;
			rotate: 2deg;
		}

		&:nth-child(2n)::before, &:nth-child(2n+1)::after {
			content: "";
			background-color: var(--color);
			display: inline-block;
			width: 2em;
			height: 2em;
			border-radius: 50%;
			vertical-align: middle;
			margin: .5em;
			border: .2em solid;
		}

		transition: scale .1s, rotate .1s;
		&:hover, &:focus {
			scale: 1.15;
			rotate: 0deg;
		}
		&:active {
			scale: .9;
		}
	}
}
#optionHolder {
	position: absolute;
	top: 0;
	right: 0;
	button {
		box-sizing: border-box;
		display: block;
		width: 5em;
		height: 5em;
		margin: .5em 0;
		--hue: 165deg;
		--sat: 65%;
		border-color: currentColor;
	}
	.multiButtons {
		position: relative;
		.buttonRow {
			position: absolute;
			top: 0;
			right: 5em;
			display: flex;
			flex-direction: row-reverse;
			z-index: 0;
			button {
				margin: 0;
				margin-right: -5em;
				transition: margin .2s;
				z-index: calc(sibling-count() - sibling-index());
			}
		}
		&:focus-within .buttonRow {
			button {
				margin-right: .5em;
			}
		}
	}
	.multiButtons > :first-child {
		z-index: 1;
	}
}
.buttonHolder {
	margin: auto;
	margin-top: .5em;
	width: max-content;
}

#heightMeasurement {
	color: var(--green-white);
	position: absolute;
	width: max-content;
	height: min-content;
	top: 3%;
	left: calc(50% + 100px);
	div {
		min-height: round(70cqh, 16px);
		border-image-source: url("../../images/measurementBorder.png");
		border-image-width: 16px;
		border-image-slice: 16;
		border-image-repeat: repeat;
	}
}

#ref2D {
	display: block;
	max-width: 100%;
}