@nodeListChildLeftHalfWidth: 1rem;
@nodeTopHeight: 1rem;
@edgeWidth: 2px;
@edgeColor: lightgray;

.halfWidth {
	width: @nodeListChildLeftHalfWidth;
}

.nodeListChildLeft {
	display: grid;
	grid-template-areas: "tl tr" "bl br";

	.tl {
		&:extend(.halfWidth);
		grid-area: tl;
	}
	.tr {
		&:extend(.halfWidth);
		border-left: @edgeWidth solid @edgeColor;
		border-bottom: @edgeWidth solid @edgeColor;
		grid-area: tr;
	}
	.bl {
		&:extend(.halfWidth);
		grid-area: bl;
	}
	.br {
		border-left: @edgeWidth solid @edgeColor;
		&:extend(.halfWidth);
		grid-area: br;
	}
}

.nodeChildTop {
	display: grid;
	grid-template-areas: "left right";

	.left {
		height: @nodeTopHeight;
		grid-area: left;
	}
	.right {
		height: @nodeTopHeight;
		grid-area: right;
	}
}

.nodeChildBottom {
	display: grid;
	grid-template-areas: "left right";

	.left {
		height: @nodeTopHeight;
		grid-area: left;
	}
	.right {
		height: @nodeTopHeight;
		grid-area: right;
	}
}