:host {
  --tree-border: var(--bs-gray-500);
}

[data-bs-theme="dark"] :host {
  --tree-border: var(--bs-gray-400);
}

.eg-tree {
  padding-left: 0;
}

.eg-tree, .eg-tree ul {
  margin-bottom: 0;
}

/* top level */
.eg-tree ul {
  padding-left: 0.5rem;
}

/* subsequent levels */
.eg-tree ul ul {
  padding-left: .75rem;
}

.eg-tree-node-expandy {
  display: inline;
}

.eg-tree-node-expandy .material-icons {
  color: var(--black);
  font-size: 16px;
}

.eg-tree-node {
  list-style: none;
}

/* from ACQB, may not be needed */
.eg-tree-node-wrapper.active {
  background-color: var(--bs-body-bg-alt);
  border: 1px solid var(--border);
  font-style: italic;
}

.eg-tree-node-nochild {
  border-left: 2px dashed var(--border);
}

/* from ACQB, may not be needed */
.btn-link {
  line-height: 1;
}

.eg-tree-branch .eg-tree-node.haschildren {
  padding-left: 1rem;
}

/* elbow lines for folders */
.eg-tree-branch .eg-tree-node {
  border-left: 2px solid var(--tree-border);
  padding-left: 1rem;
}

.eg-tree-branch .eg-tree-node:last-child {
  border-left: none;
}

.eg-tree-branch .eg-tree-node-wrapper:before {
  border-bottom: 2px solid var(--tree-border);
  display: inline-block;
  height: 1rem;
  width: 1rem;
  margin-left: -1.05rem;
  content: " ";
}

.eg-tree-branch .eg-tree-node:last-child > .eg-tree-node-wrapper:before {
  border-left: 2px solid var(--tree-border);
}

.eg-tree-branch .eg-tree-node > .eg-tree-node-wrapper {
  border: 1px solid transparent;
}

.eg-tree-branch .eg-tree-node.active > .eg-tree-node-wrapper {
  background-color: rgba(var(--box-shadow), .04);
  border: 1px solid var(--tree-border);
}

[data-bs-theme="dark"] :host .eg-tree-branch .eg-tree-node.active > .eg-tree-node-wrapper {
  background-color: rgba(255,255,255, 0.1);
}

.eg-tree.blurred .eg-tree-node.active > .eg-tree-node-wrapper {
    background-color: transparent;
    border-color: var(--bs-gray-300);
}

[data-bs-theme="dark"] :host .eg-tree.blurred .eg-tree-node.active > .eg-tree-node-wrapper {
  background-color: transparent;
  border-color: var(--bs-gray-600);
}

.eg-tree-node-wrapper {
  display: flex;
  gap: .25rem;
  justify-content: flex-start;
  align-items: flex-start;
}

.eg-tree-node-wrapper .btn {
  text-align: left;
  white-space: normal;
}

.eg-tree-node-wrapper .btn-link {
  text-decoration: none;
}

.eg-tree-node-wrapper input[type="checkbox"] {
  margin-top: .65rem;
}

.eg-tree-node-wrapper .btn.eg-tree-node-expandy {
  padding: .5rem 0 .25rem;
}

.eg-tree-node-wrapper .btn.eg-tree-node-label {
  padding: .5rem .5rem .25rem 0;
}
