@use '../../variables' as *;
.item {
  [data-drag-handle] {
    cursor: grab;
    &:active {
      cursor: grabbing;
    }
  }
  &.dragging ~ .over {
    &::before {
      top: auto;
      bottom: 0;
    }
  }
  &.over {
    position: relative;
    &::before {
      content: '';
      display: block;
      pointer-events: none;
      width: 100%;
      height: 2px;
      background: var(--color-neutral-100);
      position: absolute;
      z-index: 100;
      top: 0;
      left: 0;
    }
  }
  &.dragging {
    opacity: 0.5;
    background: var(--color-neutral-5);
  }
  &.sortAsBox {
    &.over::before {
      height: 100%;
      border: 1px solid var(--color-neutral-100);
      background: transparent;
      border-radius: var(--border-radius-small);
    }
  }
}