/**
 * Outputs the styles and selectors for the DragAndDropWrapper component.
 * 
 * @param {string} $primary-stylename (v-ddwrapper) - the primary style name for the selectors
 * 
 * @group drag-n-drop
 */
@mixin valo-dragwrapper ($primary-stylename: v-ddwrapper) {

  [draggable=true] {
    -khtml-user-drag: element;
    -webkit-user-drag: element;
  }

  .#{$primary-stylename}.v-active-drag-source {
    // This breaks file upload dragging (for some reason the ddwrapper gets this class when an active file drag is over it)
    // visibility: hidden;
  }

  .#{$primary-stylename} {
    position: relative;
  }

  .#{$primary-stylename}-over:before,
  .#{$primary-stylename}-over:after {
    content: "";
    position: absolute;
    z-index: 10;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 0 solid $v-focus-color;
  }

  .#{$primary-stylename}-over-top:before {
    border-top-width: 2px;
  }

  .#{$primary-stylename}-over-right:before {
    border-right-width: 2px;
  }

  .#{$primary-stylename}-over-bottom:before {
    border-bottom-width: 2px;
  }

  .#{$primary-stylename}-over-left:before {
    border-left-width: 2px;
  }

  .no-vertical-drag-hints {
    .#{$primary-stylename}-over-top,
    &.#{$primary-stylename}-over-top {
      &:before {
        border-top-width: 0;
      }
      &:after {
        @include valo-ddwrapper-box-hint-style;
      }
    }

    .#{$primary-stylename}-over-bottom,
    &.#{$primary-stylename}-over-bottom {
      &:before {
        border-bottom-width: 0;
      }
      &:after {
        @include valo-ddwrapper-box-hint-style;
      }
    }
  }

  .no-horizontal-drag-hints {
    &.#{$primary-stylename}-over-left,
    .#{$primary-stylename}-over-left {
      &:before {
        border-left-width: 0;
      }
      &:after {
        @include valo-ddwrapper-box-hint-style;
      }
    }

    &.#{$primary-stylename}-over-right,
    .#{$primary-stylename}-over-right {
      &:before {
        border-right-width: 0;
      }
      &:after {
        @include valo-ddwrapper-box-hint-style;
      }
    }
  }

  .#{$primary-stylename}-over-middle:after,
  .#{$primary-stylename}-over-center:after {
    @include valo-ddwrapper-box-hint-style;
  }

  .no-box-drag-hints {
    &.#{$primary-stylename}:after,
    .#{$primary-stylename}:after {
      display: none !important;
      content: none;
    }
  }


}


/**
 * Outputs the styles for a drop target when the drag is on top of it.
 * 
 * @group drag-n-drop
 */
@mixin valo-ddwrapper-box-hint-style {
  border-width: 2px;
  border-radius: $v-border-radius;
  @include opacity(.3);

  $focus-color: $v-focus-color;
  @if is-dark-color($focus-color) {
    background: scale-color($focus-color, $lightness: 50%);
  } @else {
    background: scale-color($focus-color, $lightness: -50%);
  }
}