/* ================================
   TOOLBOX LABEL HIDE MODE
================================ */

/* Remove space reserved for text */
.hide-toolbox-labels .blocklyTreeRow {
  padding-right: 0 !important;
  padding-left: 0 !important;
  min-width: unset !important;
  width: 50px !important;
  justify-content: center !important;
}

/* Hide the label text */
.hide-toolbox-labels .blocklyTreeLabel {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Center the icon */
.hide-toolbox-labels .blocklyTreeIcon {
  margin: 0 !important;
}

/* Remove leftover inline span spacing */
.hide-toolbox-labels .blocklyTreeRow > span {
  display: none !important;
}

/* Remove divider line when labels hidden */
.hide-toolbox-labels .blocklyTreeRow::before {
  display: none !important;
}

/* Shrink toolbox width */
.hide-toolbox-labels.blocklyToolboxDiv {
  width: 60px !important;
  min-width: 60px !important;
}

/* ================================
   FLYOUT SETTINGS
================================ */

/* Fixed width for flyout */
.blocklyFlyout {
  position: absolute;
  z-index: 20;
  width: 200px !important;
  overflow: hidden;
}

/* Flyout background */
.blocklyFlyoutBackground {
  fill: #fefafa !important;
  fill-opacity: 0.8;
}

/* Block wrapper */
.blocklyFlyout .blocklyBlockCanvas {
  overflow: visible;
}

/* Individual blocks */
.blocklyFlyout .blocklyDraggable {
  overflow: hidden;
  position: relative;
}

/* Inner wrapper */
.blocklyFlyout .blocklyDraggable > g {
  overflow: hidden;
}

/* Expand blocks when hovering */
.blocklyFlyout .blocklyDraggable:hover {
  overflow: visible !important;
  z-index: 100 !important;
}

/* Expand inner group */
.blocklyFlyout .blocklyDraggable:hover > g {
  overflow: visible !important;
}

/* Add hover shadow */
.blocklyFlyout .blocklyDraggable:hover > .blocklyPath {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

/* Allow overflow when hovering flyout */
.blocklyFlyout:hover {
  overflow: visible;
}