/* side menu */
#editor-side-menu {
  position: fixed;
  display: flex;
  align-items: center;
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;

  &.side-menu-hidden {
    opacity: 0;
    pointer-events: none;
  }
}
/* end side menu */

/* drag handle */
#drag-handle {
  opacity: 1;

  &.drag-handle-hidden {
    opacity: 0;
    pointer-events: none;
  }
}
/* end drag handle */

/* ai handle */
#ai-handle {
  opacity: 1;

  &.handle-hidden {
    opacity: 0;
    pointer-events: none;
  }
}
/* end ai handle */

.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-imageComponent):not(.node-image):not(.table-wrapper) {
  position: relative;
  cursor: grab;
  outline: none !important;
  box-shadow: none;

  --horizontal-offset: 5px;

  &:has(.issue-embed),
  &.table-wrapper {
    --horizontal-offset: 0px;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--horizontal-offset));
    height: 100%;
    width: calc(100% + (var(--horizontal-offset) * 2));
    background-color: --alpha(var(--background-color-accent-primary) / 20%);
    border-radius: 4px;
    pointer-events: none;
  }

  &.node-imageComponent,
  &.node-image,
  &.table-wrapper {
    --horizontal-offset: 0px;

    &::after {
      background-color: --alpha(var(--background-color-surface-1) / 20%);
    }
  }
}

/* for targeting the task list items */
li.ProseMirror-selectednode:not(.dragging)[data-checked]::after {
  margin-left: -5px;
}

/* for targeting the unordered list items */
ul > li.ProseMirror-selectednode:not(.dragging)::after {
  margin-left: -10px; /* Adjust as needed */
}

/* Initialize a counter for the ordered list */
ol {
  counter-reset: item;
}

/* for targeting the ordered list items */
ol > li.ProseMirror-selectednode:not(.dragging)::after {
  counter-increment: item;
  margin-left: -18px;
}

/* for targeting the ordered list items after the 9th item */
ol > li:nth-child(n + 10).ProseMirror-selectednode:not(.dragging)::after {
  margin-left: -25px;
}

/* for targeting the ordered list items after the 99th item */
ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
  margin-left: -35px;
}

.ProseMirror node-image,
.ProseMirror node-imageComponent {
  transition: filter 0.1s ease-in-out;
  cursor: pointer;

  &:hover {
    filter: brightness(90%);
  }

  &.ProseMirror-selectednode {
    filter: brightness(90%);
  }
}