/* =============
   Nestable
============= */

.custom-dd {
  .dd-list {
    .dd-item {
      .dd-handle {
        background: lighten($dark, 6%);
        border: 1px solid lighten($dark, 6%);
        padding: 10px 16px;
        height: auto;
        font-size: 14px;
        font-weight: normal;
        border-radius: 3px;
        color: $gray-300;
        &:hover {
          color: $primary;
        }
      }

      button {
        height: auto;
        font-size: 25px;
        margin: 8px auto;
        color: $muted;
        width: 35px;
      }
    }
  }
}

.custom-dd-empty {
  .dd-list {
    .dd3-handle {
      border: none;
      background: lighten($dark, 6%);
      height: 36px !important;
      width: 36px !important;

      &:before {
        color: inherit;
        top: 7px;
      }

      &:hover {
        color: $primary;
      }
    }
    .dd3-content {
      height: auto;
      border: none;
      padding: 8px 16px 8px 46px;
      background: lighten($dark, 6%);

      &:hover {
        color: $primary;
      }
    }
    button {
      width: 26px;
      height: 26px;
      font-size: 16px;
      font-weight: 600;
    }
  }
}

.dd-dragel > .dd-item .dd-handle {
  padding: 8px 16px !important;
  background: lighten($dark, 6%);
  height: auto;
  border: 1px solid lighten($dark, 12%);
  
}

.dd-placeholder, .dd-empty {
  background: lighten($dark, 6%);
  border: 1px solid lighten($dark, 12%);
}
.dd-dragel > .dd3-item > .dd3-handle {
  border: none;
  background: lighten($dark, 12%) !important;
  height: 36px !important;
  width: 36px !important;

  &:before {
    color: inherit;
    top: 7px;
  }
}
.dd-dragel > .dd3-item > .dd3-content {
  padding: 8px 16px 8px 46px;
  background: lighten($dark, 12%) !important;
  height: auto;
  border-color: lighten($dark, 12%);
}
