@import "../variables.scss";

.is--drag-element {
  position: absolute;
  pointer-events: none;
  touch-action: none;
  user-focus: none;
  user-select: none;
  z-index: $z-index-dragdrop;
  box-shadow: 0 0 4px 0 $color-shopware-brand-500;
  overflow: hidden;
  cursor: grab;

  & > * {
    user-focus: none;
    user-select: none;
    user-input: none;
    user-modify: none;
    pointer-events: none;
    touch-action: none;
    -webkit-user-drag: none;
  }

  &.is--valid-drag {
    box-shadow: 0 0 4px 0 $color-emerald-500;
  }

  &.is--invalid-drag {
    box-shadow: 0 0 4px 0 $color-crimson-500;
  }
}

.is--draggable {
  user-focus: none;
  user-select: none;
  cursor: grab;

  img {
    user-focus: none;
    user-select: none;
    user-input: none;
    user-modify: none;
    pointer-events: none;
    touch-action: none;
    -webkit-user-drag: none;
  }
}

.is--dragging {
  background: $color-gray-100;
  border: 1px dashed $color-gray-300;
  box-shadow: none;
  color: $color-gray-100;
  cursor: grab;

  & > * {
    opacity: 0;
  }
}