@import "../../theme/common";

.treeListContainer {
  flex: 1;
  background-color: $secondaryBackgroundColor;
  display: flex;
  flex-direction: column;
  // firefox needs min-height and min-width explicitly declared to allow descendants flex items to be scrollable (overflow)
  min-height: 0;
  min-width: 0;
}

.toolbar {
  padding: 0.3rem;
}

.nodeBox {
  margin-top: 0.5rem;
  flex: 1;
}

.nodesBox {
  overflow: auto;
  width: auto;
  height: auto;
  flex: 1;
}

.nodeTitle {
  padding-left: 0.3rem;
  margin-right: 0.3rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.nodeTitle:before {
  margin-left: 0.5rem;
  font-size: 1rem;
  font-family: FontAwesome;
  color: darkkhaki;
  margin-right: 0.3rem;
}

.nodeTitle:not(.collapsed):before {
  content: "\f0da";
}

.nodeTitle.collapsed:before {
  content: "\f0d7";
  color: $primarySelectionBackgroundColor;
}

.nodeTitle:hover:before {
  color: $primarySelectionBackgroundColor;
}

.nodeContainer:not(.collapsed) {
  max-height: 15999px;
  transition: 0.15s;
}

.nodeContainer {
  margin-top: 0.3rem;
}

.nodeContainer.collapsed {
  max-height: 0;
  overflow: hidden;
  transition: 0.15s;
}

.link {
  padding: 0.2rem;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.link.active {
  background: $primarySelectionBackgroundColor;
  color: $primarySelectionColor;
}

.link:hover {
  background: $primaryHoverBackgroundColor;
  color: $primaryHoverColor;
}

.entityIcon {
  margin-right: 0.3rem;
  color: #F16220;

}

.entityDefaultIcon:after {
  font-family: FontAwesome;
  content: "\f1fe";
}

.add {
  cursor: pointer;
}

.add:after {
  content: "\f067";
  font-family: FontAwesome;
  color: $secondaryColor;
  padding: 0.1rem;
  font-size: 1rem;
}

.add:hover:after {
  color: $primaryHoverBackgroundColor;
}

.help {
  cursor: pointer;
  text-decoration: none;
}

.help:after {
  content: "\f128";
  font-family: FontAwesome;
  color: $secondaryColor;
  padding: 0.1rem;
  font-size: 1rem;
  visibility: hidden;
}

.nodeBox:hover .help:after {
  visibility: visible;
}

.help:hover:after {
  color: $primaryHoverBackgroundColor;
}

.contextMenu {
  background-color: $secondaryColor;
  position: absolute;
  padding: 0.5rem;
  min-width: 9rem;
  z-index: 200;
}

.contextMenuContainer {
  position: relative;
  z-index: 200;
}

.contextButton {
  color: $primaryColor;
  padding: 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  @include no-select();
}

.contextButton:hover {
  background-color: $primaryHoverBackgroundColor;
  color: $primaryHoverColor
}