#lib-df-buttons {
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border: none;
	position: absolute;
	display: grid;
	pointer-events: none;
	height: calc(100vh - 70px);
	grid-template-rows: auto auto;
	grid-template-columns: auto auto;

	#magnet {
		padding: 5px 10px 5px 0px;
		height: fit-content;
		width: fit-content;
		pointer-events: all;
		i {
			visibility: hidden;
		}
		
		&:hover > i {
			visibility: visible;
		}
	}

	&.left {
		#magnet {
			grid-area: 1 / 2 / 1 / 2;
		}
		#moduleControls {
			grid-area: 1 / 1 / 1 / 1;
		}
	}
	&.top {
		height: fit-content;
		#magnet {
			grid-area: 1 / 1 / 1 / 1;
		}
		#moduleControls {
			grid-area: 1 / 2 / 1 / 2;
		}
	}
	&.right {
		#magnet {
			grid-area: 1 / 1 / 1 / 1;
		}
		#moduleControls {
			grid-area: 1 / 2 / 1 / 2;
		}
	}
	&.bottom {
		height: fit-content;
		margin-top: auto;
		#magnet {
			grid-area: 1 / 1 / 1 / 1;
		}
		#moduleControls {
			grid-area: 2 / 1 / 2 / 1;
		}
	}
}

#moduleControls {
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border: none;
	height: calc(100vh - 70px);
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;

	.group-tools {
		display: inline-flex;
	}

	.controls {
		display: none;
		list-style: none;
		padding: 0;
		margin: 0;
		justify-content: flex-start;
	}

	.controls.active {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap-reverse;
	}

	.control-tool {
		width: 36px;
		height: 36px;
		box-sizing: content-box;
		font-size: 24px;
		line-height: 36px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 0 0 10px #000;
		margin: 0 10px 10px 0;
		color: #bbb;
		text-align: center;
		border: 1px solid #000;
		border-radius: 5px;
		cursor: pointer;
		pointer-events: all;
	}

	.control-tool.active,
	.control-tool:hover {
		color: #fff;
		border: 1px solid red;
		border-bottom: 1px solid #ff6400;
		box-shadow: 0 0 10px #ff6400;
	}

	.control-tool.toggle {
		background: rgba(30, 0, 60, 0.5);
		border: 1px solid #3b1893;
	}

	.control-tool.toggle.active,
	.control-tool.toggle:hover {
		background: rgba(60, 0, 120, 0.5);
		box-shadow: 0 0 10px #9b8dff;
	}
}

#lib-df-buttons.bottom #moduleControls {
	flex-direction: column-reverse;
	height: fit-content;
	// width: calc(100vw - 532px);
	// left: 222px;
	// bottom: 70px;
	.controls.active {
		flex-direction: row;
		justify-content: unset;
	}
}

#lib-df-buttons.top #moduleControls {
	// top: 0;
	flex-direction: column;
	height: fit-content;
	.controls.active {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: unset;
	}
}

#lib-df-buttons.left #moduleControls {
	// top: 0;
	width: fit-content;
	// height: calc(100vh - 150px);
	flex-direction: row;
	.controls.active {
		flex-wrap: wrap;
	}
}