// For Drag n Drop Component
// used in detail list
// https://github.com/bevacqua/dragula

.cdk-drag-preview {
  @extend %cursor-grab,
          %position-fixed,
          %bg-white,
          .rounded-0,
          .border-left-0,
          .border-right-0,
          %m-0;

  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);

  .x-list-group-item-header,
  .x-list-group-item-content {
    @extend %d-flex,
    %align-items-center,
            .w-100;
  }

  .x-list-group-item-header {
    @extend .text-info,
            .justify-content-between;
    label {
      @extend %font-size-xs,
              %mb-0;
    }
    .x-icon-container {
      @extend %x-icon-lg,
              %text-info,
              .is-clickable;

      @include hover-focus-active {
        @extend %cursor-pointer,
                %text-primary;

      }
    }
  }
}

.cdk-drag-placeholder {
  @extend %bg-light-secondary;
}