.pfng-tree-list {
  // Override to accomodate drop slot
  .list-pf-container {
    padding-bottom: 15px;
  }

  // Drag over list item
  .node-content-wrapper {
    padding: 0;
    &.is-dragging-over {
      background-color: @color-pf-black-300;
    }
  }

  // Drag over drop slot
  .node-drop-slot {
    height: 5px;
    &.is-dragging-over {
      height: 25px;
      background-color: @color-pf-black-300;
    }
  }

  // Toggle
  .toggle-children {
    background-image: none;
    font-family: FontAwesome;
    height: inherit;
    top: -1px;
    vertical-align: middle;
  }

  // Toggle up
  .toggle-children-wrapper-collapsed .toggle-children {
    transform: none;
    &:before {
      content: '\f105';
      font-size: 22px;
      -webkit-font-smoothing: antialiased;
    }
  }

  // Toggle down
  .toggle-children-wrapper-expanded .toggle-children {
    transform: none;
    &:before {
      content: '\f107';
      font-size: 22px;
      -webkit-font-smoothing: antialiased;
    }
  }

  //.toggle-children-placeholder { width: 20px; }

  // Padding for toggle down
  .toggle-children-wrapper {
    cursor: pointer;
    padding: 0;
    &.toggle-children-wrapper-expanded {
      padding-right: 5px;
    }
  }

  .tree {
    cursor: default;
  }

  // Indentation -- highlighting should occupy entire row
  .tree-children {
    padding-left: 0;
  }
}

// Container for item click events
.pfng-tree-list-content {
  display: flex;
  flex-grow: 1;
}

// A handle decoration for draggable items
.pfng-tree-list-dnd {
  margin-left: 5px;
  &:hover {
    &:before {
      background-image: linear-gradient(to bottom, @color-pf-blue-400 60%, @color-pf-white 0%);
      background-position: left;
      background-repeat: repeat-y;
      background-size: 2px 5px;
      border: 4px solid @color-pf-blue-400;
      border-color: @color-pf-blue-500;
      content: '';
      height: 55px;
      left: 4px;
      position: absolute;
      width: 10px;
    }
  }
}

.pfng-tree-list-dnd-slot {
  // Override to accomodate drop slot
  &.list-pf-container {
    padding-top: 15px;
  }
}