#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;
}
#lib-df-buttons #magnet {
  padding: 5px 10px 5px 0px;
  height: fit-content;
  width: fit-content;
  pointer-events: all;
}
#lib-df-buttons #magnet i {
  visibility: hidden;
}
#lib-df-buttons #magnet:hover > i {
  visibility: visible;
}
#lib-df-buttons.left #magnet {
  grid-area: 1/2/1/2;
}
#lib-df-buttons.left #moduleControls {
  grid-area: 1/1/1/1;
}
#lib-df-buttons.top {
  height: fit-content;
}
#lib-df-buttons.top #magnet {
  grid-area: 1/1/1/1;
}
#lib-df-buttons.top #moduleControls {
  grid-area: 1/2/1/2;
}
#lib-df-buttons.right #magnet {
  grid-area: 1/1/1/1;
}
#lib-df-buttons.right #moduleControls {
  grid-area: 1/2/1/2;
}
#lib-df-buttons.bottom {
  height: fit-content;
  margin-top: auto;
}
#lib-df-buttons.bottom #magnet {
  grid-area: 1/1/1/1;
}
#lib-df-buttons.bottom #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;
}
#moduleControls .group-tools {
  display: inline-flex;
}
#moduleControls .controls {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}
#moduleControls .controls.active {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
}
#moduleControls .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;
}
#moduleControls .control-tool.active,
#moduleControls .control-tool:hover {
  color: #fff;
  border: 1px solid red;
  border-bottom: 1px solid #ff6400;
  box-shadow: 0 0 10px #ff6400;
}
#moduleControls .control-tool.toggle {
  background: rgba(30, 0, 60, 0.5);
  border: 1px solid #3b1893;
}
#moduleControls .control-tool.toggle.active,
#moduleControls .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;
}
#lib-df-buttons.bottom #moduleControls .controls.active {
  flex-direction: row;
  justify-content: unset;
}

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

#lib-df-buttons.left #moduleControls {
  width: fit-content;
  flex-direction: row;
}
#lib-df-buttons.left #moduleControls .controls.active {
  flex-wrap: wrap;
}