body {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	height: 100vh;

	>.bar {
		background: black;
		flex: 0.08;
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 1rem;

		>.button {
			color: white;
			font-weight: bold;
			font-size: 1.25rem;
			padding: 0.25rem 0.5rem;
			cursor: pointer;
			border: 1px dotted white;

			&.chosen {
				background: white;
				color: black;
			}
		}
	}

	>.canvas {
		position: relative;
		background: #111111;
		flex: 1;
		user-select: none;

		rectangular-selection {
			border: 1px dotted #000;
			position: absolute;
			background-color: black;
		}

		>graph-node {
			position: absolute;
			font-weight: bold;
			aspect-ratio: 1 1;
			cursor: pointer;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5rem;
			box-shadow: 0 0 1rem black;
			transition:
				background ease-in-out 125ms,
				transform ease-in-out 125ms;

			&:hover {
				background: white!important;
				transform: scale(1.25, 1.25);
			}
		}

		>graph-edge {
			position: absolute;
			background: red;
			z-index: 1;
			transform-origin: 0 50%;
			transition: background ease-in-out 125ms;
			cursor: crosshair;

			&:hover {
				background: white!important;
			}
		}

		>span {
			position: absolute;
			transform-origin: 0 50%;
			font-weight: bolder;
			z-index: 2;
			text-shadow: 0 0 0.5rem white;
		}
	}
}