.draggable-block-menu {
  border-radius: 4px;
  padding: 2px 1px;
  cursor: grab;
  opacity: 0;
  position: absolute;
  left: 0px; /* Position inside the editor */
  top: 0;
  will-change: transform;
  z-index: 10;
  transition: opacity 0.2s ease;
}

.draggable-block-menu .icon {
  width: 16px;
  height: 16px;
  opacity: 0.3;
  background-image: url("/images/icons/drag-handle.svg");
}

.draggable-block-menu:active {
  cursor: grabbing;
}

.draggable-block-menu:hover {
  background-color: #efefef;
}

.draggable-block-target-line {
  pointer-events: none;
  background: deepskyblue;
  height: 4px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform;
}

/* Make the drag handle visible when hovering over the block */
.draggable-block:hover > .draggable-block-menu {
  opacity: 0.8;
}

.draggable-block-menu:hover {
  opacity: 1 !important;
}

/* Add styles for the editor container */
.editor-scroller {
  width: 100%;
  min-height: 150px;
  position: relative;
}

.editor {
  position: relative;
  outline: 0;
  overflow: auto;
  resize: vertical;
}

/* Ensure the editor paragraphs have proper positioning for the drag handles */
.editor-paragraph {
  position: relative;
  margin: 0;
  padding: 4px 0;
}
