.fupl-sortable {
  position: relative;
  .fupl-item[draggable] {
    cursor: grab;
    user-select: none;
    transition: transform .3s linear;
  }
}

// class attached to an element when begin dragged
.fupl-item-sorting {
  background: $fupl-sorting-bg;
  opacity: .7;
}

.fupl-item-dragover {
  transform: scale(.8);
}

.fupl-wrapper:not([disabled]) {


  &.fupl-type-img {
    .fupl-sortable-icon {
      display: block;
      width: 100%;
      margin: 1rem 0;
    }
  }
  &.fupl-type-doc {
    .fupl-sortable-icon {
      display: block;
      width: 100%;
      margin: .5rem 0;
      text-align: center;
    }
  }

  .fupl-sortable-icon {

    > div {
      position: relative;
      display: block;
      width: $fupl-sortable-icon-dot-size * 5;
      height: $fupl-sortable-icon-dot-size * 3;
      margin: 0 auto;
      cursor: grab;

      &::after {
        position: absolute;
        top: 0;
        left: 50%;
        width: $fupl-sortable-icon-dot-size;
        height: $fupl-sortable-icon-dot-size;

        color: $fupl-sortable-icon-dot-color; // inherit from box shadow
        content: '';
        background-color: $fupl-sortable-icon-dot-color;
        border-radius: 50%;

        box-shadow:
          ($fupl-sortable-icon-dot-size * -2) ($fupl-sortable-icon-dot-size * 0) 0 0,  // Top left
          ($fupl-sortable-icon-dot-size * 2) ($fupl-sortable-icon-dot-size * 0) 0 0,  // Top right
          ($fupl-sortable-icon-dot-size * -2) ($fupl-sortable-icon-dot-size * 2) 0 0, // Bottom left
          ($fupl-sortable-icon-dot-size * 0) ($fupl-sortable-icon-dot-size * 2) 0 0,  // Bottom middle
          ($fupl-sortable-icon-dot-size * 2) ($fupl-sortable-icon-dot-size * 2) 0 0;  // Bottom right

        transform: translateX(-50%);
      }
    }
  }


  .fupl-sortable {
    .fupl-item:hover {
      .fupl-sortable-icon {
        > div::after { /* stylelint-disable-line selector-max-compound-selectors, max-nesting-depth */
          color: $fupl-sortable-icon-hover-dot-color;
          background-color: $fupl-sortable-icon-hover-dot-color;
        }
      }
    }
  }
}