:root {
	--gsuiDragline-color: #fff;
	--gsuiDragline-dotSize: 8px;
	--gsuiDragline-dotRad: 50%;
	--gsuiDragline-lineSize: 4px;
}

/* ................................................................ */
.gsuiDragline {
	position: absolute;
	max-width: 0;
	max-height: 0;
	color: var( --gsuiDragline-color );
}
.gsuiDragline-dragging,
.gsuiDragline-dragging .gsuiDragline-to {
	pointer-events: none;
}

/* ................................................................ */
.gsuiDragline-main {
	position: relative;
	pointer-events: none;
}

/* ................................................................ */
.gsuiDragline-line {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: var( --gsuiDragline-lineSize );
	stroke-linecap: round;
}
.gsuiDragline-down .gsuiDragline-line {
	top: 0;
	bottom: auto;
}
.gsuiDragline-right .gsuiDragline-line {
	left: 0;
	right: auto;
}

/* ................................................................ */
.gsuiDragline-to {
	position: absolute;
	width: var( --gsuiDragline-dotSize );
	height: var( --gsuiDragline-dotSize );
	margin: calc( var( --gsuiDragline-dotSize ) / -2 );
	cursor: pointer;
	border-radius: var( --gsuiDragline-dotRad );
	pointer-events: all;
	background-color: var( --gsuiDragline-color );
	transition: .2s background-color;
}
.gsuiDragline-down .gsuiDragline-to { bottom: 0; }
.gsuiDragline-right .gsuiDragline-to { right: 0; }
.gsuiDragline-main:not( .gsuiDragline-down ) .gsuiDragline-to { top: 0; }
.gsuiDragline-main:not( .gsuiDragline-right ) .gsuiDragline-to { left: 0; }

/* ................................................................ */
.gsuiDragline-drop {
	position: relative;
	max-width: 0;
	max-height: 0;
}
.gsuiDragline-drop::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	background-color: var( --gsuiDragline-color );
	transition: .2s all;
}
.gsuiDragline-dropActive::before {
	width: var( --gsuiDragline-dotSize );
	height: var( --gsuiDragline-dotSize );
	margin: calc( var( --gsuiDragline-dotSize ) / -2 );
	cursor: pointer;
	border-radius: var( --gsuiDragline-dotRad );
}
.gsuiDragline-dropActive:hover::before {
	transform: scale( 2 );
}