@mixin no-select {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tree {
  position: relative;
  overflow: hidden;
  @include no-select;
}

.draggable {
  position: absolute;
  opacity: 0.8;
  @include no-select;
}

.node {
  &.placeholder > * {
    visibility: hidden;
  }

  &.placeholder {
    border: 1px dashed #ccc;
  }

  .inner {
    position: relative;
    cursor: pointer;
    padding-left: 10px;
  }

  .collapse {
    position: absolute;
    left: 0;
    cursor: pointer;

    width: 20px;
    height: 25px;
  }

  .caretRight {
    margin-top: 3px;
    margin-left: -3px;
  }

  .caretDown {
    transform: rotate(90deg);
    margin-left: -4px;
    margin-top: 2px;
  }
}

.node {
  &.placeholder {
    border: 1px dashed #1385e5;
  }

  .inner {
    font-size: 14px;
  }

  .nodeLabel {
    display: inline-block;
    width: 100%;
    padding: 4px 5px;

    &.isActive {
      background-color: #31363F;
    }
  }

  .rootLabel {
    color: #ccc;
  }
}