body .p-tree .p-tree-container {
  overflow-x: hidden;
}

.treesearch .searchbox input:focus {
  border: none;
}

body {
  .p-tree *.p-treenode:not(.blocked) > .p-treenode-content:not(.p-highlight) > .p-treenode-label:hover {
    padding: 2px;
    color: $tree-selector-text-color;
  }

  .p-tree .p-treenode .p-treenode-content {
    .p-treenode-label {
      opacity: .4;
      padding: 2px;
      width: 0; /* hack to fix an issue where an entry name being long would push the action buttons outside of the screen. */

      /* the default treenode is without the class p-treenode-selectable, so style it like a disabled treenode */
      cursor: not-allowed;
      user-select: none;

      label {
        cursor: not-allowed;
      }
    }
  }

  .p-tree .p-component-content {
    border: none;
  }

  .p-tree .p-treenode .p-treenode-content.p-treenode-selectable.p-highlight {
    background-color: $tree-item-selected-bg-color;
    color: $tree-selector-text-highlight-color;
  }

  .p-tree .p-treenode.restricted:not(.current) {
    > .p-treenode-content:focus {
      background-color: unset !important;
    }
  }

  .p-tree *.p-treenode:not(.blocked) {
    > .p-treenode-content {
      color: $tree-selector-text-color;


      *.p-treenode-label {
        opacity: 1;
        cursor: pointer;

        label {
          cursor: pointer;
        }
      }

      &:not(.p-highlight) {
        &:hover, &:focus {
          background-color: var(--menu-text-hover-background-color);
        }
      }
    }
  }

  .p-tree .p-treenode .p-treenode-content.p-highlight > span > div > span:hover {
    background-color: transparent;
    color: $tree-selector-text-highlight-color;
  }

  .p-tree .p-treenode .p-treenode-content.p-highlight > span > span:hover {
    background-color: transparent;
    color: $tree-selector-text-highlight-color;
  }

  .p-tree .p-treenode-droppoint {
    height: 0;
  }

  .p-tree.p-treenode-dragover .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
    background-color: var(--menu-text-hover-background-color);
  }

  p-tree {
    .p-tree {
      padding: 5px 5px 0;
      width: 100%;

      &.p-treenode-dragover {
        .p-treenode-content * {
          pointer-events: none !important;
        }

        .p-treenode:not(.droppable-folder, .droppable-entry) {
          & > .p-treenode-content {
            opacity: 0.5;
            pointer-events: none !important;
          }
        }
      }

      .p-tree-container {

        @include media-breakpoint-down(sm) {
          padding: 0;
        }
      }

      .fa-caret-down::before {
        transform: rotate(90deg);
      }

      .p-treenode-children {
        padding: revert;
      }

      .p-tree-toggler {
        color: $lighter-default-text-color;
        width: 18px;

        .p-tree-toggler-icon.pi-chevron-down,
        .p-tree-toggler-icon.pi-chevron-right {
          font-size: 20px;
          font-family: 'devolutions-icons';
        }

        .p-tree-toggler-icon.pi-chevron-down:before,
        .p-tree-toggler-icon.pi-chevron-right:before {
          content: "arrow_down";
          display: inline-block;
        }

        .p-tree-toggler-icon.pi-chevron-right:before {
          transform: rotate(-90deg);
        }
      }


      .p-treenode-leaf-icon {
        color: $default-text-color;
        width: 18px;
      }

      .p-treenode-content {
        display: flex;
        align-items: center;

        .p-treenode-label {
          flex: 1;

          img.dvl-custom-tree-icon {
            height: 16px;
            vertical-align: middle;
            padding: 5px;
            box-sizing: content-box;
          }
        }
      }

      .p-treenode {
        &.root {
          > .p-treenode-content > .p-tree-toggler {
            visibility: hidden;
          }
        }

        &.current {
          > .p-treenode-content {
            background-color: var(--tree-item-selected-bg-color);
            border: 1px solid var(--input-txt-border-focus-color);
            border-radius: $borderRadius;
          }
        }
      }
    }

    &.drag-folder, &.drag-parent-subconnections { // If folder or an entry with subconnections being drag
      .p-tree.p-treenode-dragover .p-treenode:not(.droppable-folder) {
        & > .p-treenode-content {
          opacity: 0.5;
          pointer-events: none !important;
        }
      }
    }
  }
}

asm-navigation-tree,
.dvl-navigation-tree {
  @include media-breakpoint-down(sm) {
    max-width: none !important;
    width: 100%;
  }
}

asm-navigation-tree {
  width: 400px;
}

@media screen and (max-width: 767px) {
  asm-navigation-tree {
    width: 100%;
  }
}
