.path-point {
	--point-rotateZ: 0deg;
	--point-text-size: 10pt;
	--point-size: 1.5em;
	--point-color: #aaa;
	--point-border-width: 2px;
	--point-border-color: #666;
	--point-border-radius: calc(var(--point-size) / 2);
	--point-text-color: #111;
	position: absolute;
	display: block;
/*	width: 0;
	height: 0;	*/
}

.path-point::before, .path-point::after, .path-point text {
	position: absolute;
	top: calc(var(--point-size) / -2);
	left: calc(var(--point-size) / -2);
	width: var(--point-size);
	height: var(--point-size);
	user-select: none;
}

.path-point::before { /* the shape */
	content: "";
	background-color: var(--point-color);
	border: var(--point-border-width) solid var(--point-border-color);
	border-radius: var(--point-border-radius);
	display: block;
	transform: rotateZ(var(--point-rotateZ));
}

.path-point::after { /* the text */
	font-size: var(--point-text-size);
	display: flex;
	align-items: center;
	justify-content: center;
	text-wrap: nowrap;
	content: attr(point-index);
	color: var(--point-text-color);
}

.path-point:not(.selected)::before { border-color: transparent; }

.path-point.selected { font-weight: bold; }
.path-point.path-start { --point-color: #3c3; --point-border-color: #0b0; --point-text-color: #111; --point-border-radius: 0; }
.path-point.path-end { --point-color: #c33; --point-border-color: #b00; --point-text-color: #fff; --point-border-radius: 0; --point-rotateZ: 45deg;  }
.path-point.path-ctrl { --point-color: #33c; --point-border-color: #00b; --point-text-color: #eee; }
.path-point.path-step { --point-color: #c3c; --point-border-color: #b0b; }