.x-drag-drop {
  @include make-col-ready();
  @include make-col(12);

  &-header {
    @include  make-col-ready();
    @include  make-col(12);
    @extend   .mb-2;
  }

  &-container {
    @include make-col-ready();
    @include make-col(12);
  }

  &-row {
    @include  make-row();
    @extend   .align-items-center;
  }

  &-item-container {
    @include make-col-ready();
    @include make-col(12);

    & & {
      @extend .pl-5;
    }
  }

  &-item-list {
    @include  make-col-ready();
    @include  make-col(12);
    @extend   .mb-4;

    & & {
      @extend .mb-0;
    }
  }

  &-item {
    @include  make-col-ready();
    @include  make-col(12);
    @extend   %cursor-pointer, 
              .mb-1,
              .pt-2,
              .pr-2,
              .pb-2,
              .pl-3;
    
    border-radius: $border-radius-lg;
    background-color: #f5f6f7;

    &:hover,
    &:active {
      background-color: #D0E0EC;
    }

    &-label {
      @extend .text-info;
      font-size: $small-font-size;
    }
  }

  &-btn {
    @include  make-col-ready();
    @include  make-col(12);
    @extend   %cursor-pointer,
              .py-1,
              .px-0;

    &.x-drag-drop-sub-item-btn { @extend .mb-1; }

    &-row {
      @include  make-row();
      @extend   .justify-content-center;
    }

    &-divider {
      @include make-col-ready();
      @include make-col(12);
      @include transition($btn-transition);
      height: 1.0625rem;
      position: absolute;
      top: 0;
      border-bottom: 2px solid rgba(0, 96, 170, 0.15);

      &.is-hover { border-bottom: 2px solid theme-color("primary"); }
    }

    &-icon {
      @extend .px-2;
      display: inline-flex;
      position: relative;
      z-index: 10;
      background-color: #ffffff;
    }
  }

  & .x-icon-container { 
    @include transition($btn-transition);
    @extend .x-icon-md;
    color: theme-color("primary-lighter");

    @include x-hover-focus-active {
      color: theme-color("primary");
    }

    &.is-hover { color: theme-color("primary"); }
  }

}