.draggable-block-menu {
  border-radius: 4px;
  padding: 0;
  cursor: grab;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;

  &:active {
    cursor: grabbing;
  }

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    .icon {
      opacity: 1;
    }
  }

  .icon {
    width: 18px;
    height: 24px;
    opacity: 0.3;
    background-image: url(../../../ui/icons/DraggableBlock/index.svg);
  }

  html[data-theme='dark'] & {
    .icon {
      filter: invert(1);
    }
  }
}

.draggable-block-target-line {
  pointer-events: none;
  background: var(--theme-elevation-200);
  border: 1px solid var(--theme-elevation-650);
  border-radius: 4px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform;
  transition: transform 0.04s;
}

/* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */
@-moz-document url-prefix() {
  .draggable-block-target-line {
    transition: none;
  }
}
