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

.tree {
  @include no-select;
  padding: 20px 20px 20px 5px;
  overflow: scroll;
  position: absolute;
  top: 0;
  bottom: 40px;
  right: 0;
  left: 0;
}

.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 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    &.isModifying {
      cursor: move;
    }

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

  .rootLabel {
    color: #ccc;
  }
}