:root {
	--gsuiDotline-color: #000;
	--gsuiDotline-lineWidth: 1px;
	--gsuiDotline-dotBg: transparent;
	--gsuiDotline-dotSize: 12px;
	--gsuiDotline-dotSizeHover: calc( var( --gsuiDotline-dotSize ) * 2 );
	--gsuiDotline-dotHandleSize: 10px;
}

.gsuiDotline {
	position: relative;
	color: var( --gsuiDotline-color );
	stroke: currentColor;
	stroke-width: var( --gsuiDotline-lineWidth );
}

.gsuiDotline svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.gsuiDotline polyline {
	fill: none;
}

.gsuiDotline-dot {
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
	width: var( --gsuiDotline-dotSize );
	height: var( --gsuiDotline-dotSize );
	margin:
		calc( var( --gsuiDotline-dotSize ) / -2 ) 0 0
		calc( var( --gsuiDotline-dotSize ) / -2 );
	border-radius: 50%;
	border: 2px solid;
	background-color: var( --gsuiDotline-dotBg );
	transition: .2s;
	transition-property:
		width, height,
		margin-left, margin-top;
}
.gsuiDotline-dot:hover,
.gsuiDotline-dotSelected {
	--gsuiDotline-dotSize: var( --gsuiDotline-dotSizeHover );
}
.gsuiDotline-dot::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: var( --gsuiDotline-dotHandleSize ) solid transparent;
	margin: calc( var( --gsuiDotline-dotHandleSize ) * -1 );
	border-radius: 50%;
}