Crosshair {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;

	.centerDot {
		background-color: white;
		top: 0px;
		left: 0px;
		width: 2px;
		height: 2px;
		box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.4);
		transition: all 0.1s ease-out 0s;
	}

	.leftBar {
		left: -16px;
		width: 12px;
		height: 1px;
	}

	.rightBar {
		left: 5px;
		width: 12px;
		height: 1px;
	}

	.topBar {
		top: -16px;
		width: 1px;
		height: 12px;
	}

	.bottomBar {
		top: 5px;
		width: 1px;
		height: 12px;
	}

	.sharedBarStyling {
		position: absolute;
		background-color: white;
		box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.4);
		transition: all 0.1s ease-out 0s;
	}

	& > .hideCrosshair,
	&.hideCrosshair {
		display: none;
		box-shadow: none; // bug: still shows with display none
	}
}