<script>
	import { onMount } from 'svelte';

	let heightOdd = false;
	let widthOdd = false;

	function updateOdd() {
		heightOdd = window.innerHeight % 2 === 1;
		widthOdd = window.innerWidth % 2 === 1;
	}

	onMount(() => {
		updateOdd();
		window.addEventListener('resize', updateOdd);
	});
</script>

<div class="axes" class:heightOdd class:widthOdd>
	<div class="horizontal"></div>
	<div class="vertical"></div>
</div>

<style>
	.axes {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;

		--size: 3px;
	}

	.axes .horizontal,
	.axes .vertical {
		position: absolute;
		background-color: red;
		z-index: 5;
		opacity: 0.66;
	}

	.axes .horizontal {
		top: 50%;
		left: 0;
		width: 100%;
		height: var(--size);
		transform: translateY(-50%);
	}

	.axes .vertical {
		top: 0;
		left: 50%;
		width: var(--size);
		height: 100%;
		transform: translateX(-50%);
	}

	/*.axes.heightOdd .horizontal {*/
	/*	top: calc(50% + 1px);*/
	/*}*/

	/*.axes.widthOdd .vertical {*/
	/*	left: calc(50% + 1px);*/
	/*}*/
</style>
