:host {
  display: block;
}

.entry {
  text-align: left;
  color: #bdbdbd;
  transition: color .3s, opacity .3s, background .1s;
  cursor: pointer;
  outline: none;
  opacity: .15;
}

.entry .prepath {
  color: #616161;
  /* margin-right: -4px; */
}

.entry.last {
  border-bottom: none;
}

.entry.matching {
  opacity: 1;
}

.entry:hover {
  color: #ffffff;
}

.entry.node:hover, .entry.folder .title:hover {
  background: #515151;
}

.node, .folder .title {
  padding: 16px;
}

.node .extra {
  float: right;
}

.node .extra .access {
  font-size: 12px;
  color: #757575;
  transition: color .3s;
}

.node:hover .extra .access.public {
  color: #76FF03;
}

.node:hover .extra .access.internal {
  color: #448aff;
}

.node:hover .extra .access.socket {
  color: #49c289;
}

.node .extra .method {
  color: #616161;
  font-size: 9px;
  font-weight: 900;
  transition: color .3s;
}

.node:hover .extra .method {
  color: #9e9e9e;
}

.folder .sub nodelist-entry:not(:last-child),
.folder.expanded>.title {
  border-bottom: 1px dashed #616161;
}

.folder .title {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.folder .title>div {
  flex-grow: 1;
}

.folder .title>img {
  width: 24px;
  opacity: .35;
  transition: opacity .15s, transform .3s;
}

.folder:hover>.title>img {
  opacity: 1;
}

.folder .title .arrow {
  opacity: .15;
  width: 12px;
  height: 12px;
  margin: 8px;
}

.folder.expanded>.title>.arrow {
  transform: rotate(90deg);
}

.folder:hover>.title>.arrow {
  opacity: .3;
}
