// A list of possible draggable classnames can be found here: https://github.com/Shopify/draggable/tree/master/src/Draggable#classes
.draggable--is-dragging {
  user-select: none;

  .ContentEdit-preview {
    pointer-events: none;
  }

  &.is-collapsed {
    box-shadow: var(--shadow-3);
  }
}

.draggable--over {
  z-index: 1;
}

.draggable-mirror {
  background: rgb(238 246 250 / 50%) !important;
  border: solid 1px var(--color-blue5);
  box-shadow: var(--shadow-3);
  list-style: none;
  z-index: 301;
}

.draggable-source--is-dragging {
  border: solid 1px var(--color-blue5) !important;
  opacity: 0.5;
}

// Hide literally everything. Even the pseudo elements.
.draggable-mirror::after,
.draggable-mirror::before,
.draggable-mirror > * {
  display: none !important;
}

.draggable-mirror {
  &.Sortable-item {
    list-style: none;
  }
}
