@import '../../sass/_custom-variables/libs';

$nestable-handle-padding-vertical: .3125rem !default;
$nestable-handle-padding-horizontal: .75rem !default;
$nestable-item-margin: .3125rem !default;
$nestable-button-width: 2rem !default;

.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dd-item > button,
.dd-list {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;

  .dd-collapsed & {
    display: none;
  }

  @include feature-ltr {
    .dd-list {
      padding-left: 2rem;
    }
  }

  @include feature-rtl {
    .dd-list {
      padding-right: 2rem;
    }
  }
}

.dd-item,
.dd-empty,
.dd-placeholder {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

.dd-handle,
.dd-content {
  display: block;
  margin: $nestable-item-margin 0;
  padding: $nestable-handle-padding-vertical $nestable-handle-padding-horizontal;
  text-decoration: none;
  cursor: move;
}

.dd-handle + .dd-content {
  cursor: auto;
}

.dd-item > button {
  position: absolute;
  display: block;
  float: left;
  overflow: hidden;
  margin: $nestable-item-margin 0 $nestable-item-margin 1px;
  padding: 0;
  width: $nestable-button-width;
  border: 0;
  background: transparent;
  text-align: center;
  text-indent: 100%;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  color: inherit;

  &:before {
    content: '+';
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    text-indent: 0;
  }

  &[data-action="collapse"]:before {
    content: '-';
  }

  @include feature-ltr {
    ~ .dd-handle {
      padding-left: $nestable-button-width;
    }
  }

  @include feature-rtl {
    ~ .dd-handle {
      padding-right: $nestable-button-width;
    }
  }
}

.dd-placeholder,
.dd-empty {
  box-sizing: border-box;
  margin: $nestable-item-margin 0;
  padding: 0;
}

.dd-empty {
  min-height: 6.25rem;
}

.dd-dragel {
  position: absolute;
  z-index: 9999;
  pointer-events: none;

   > .dd-item .dd-handle {
    margin-top: 0;
  }
}

@if $enable-light-style {
  .light-style {
    @import '../../sass/_appwork/include';

    .dd-handle,
    .dd-content {
      border: 1px solid $gray-200;
      border-radius: $border-radius;
    }

    .dd-placeholder,
    .dd-empty {
      border: 1px dashed $gray-300;
      background: $gray-100;
    }
  }
}

@if $enable-material-style {
  .material-style {
    @import '../../sass/_appwork/include-material';

    .dd-handle,
    .dd-content {
      border: 1px solid $gray-200;
      border-radius: $border-radius;
    }

    .dd-placeholder,
    .dd-empty {
      border: 1px dashed $gray-300;
      background: $gray-100;
    }
  }
}

@if $enable-dark-style {
  .dark-style {
    @import '../../sass/_appwork/include-dark';

    .dd-handle,
    .dd-content {
      border: 1px solid $gray-200;
      border-radius: $border-radius;
    }

    .dd-placeholder,
    .dd-empty {
      border: 1px dashed $gray-300;
      background: $gray-100;
    }
  }
}