/* TODO(jeff): refactor, simplify, and encapsulate with finer resolution all CSS  */

.tree input[type="checkbox"] { display: none }

.tree,
.tree ul,
.tree li {
  list-style: none;
  margin:     0;
  padding:    0;
}

.tree ul { /* toggle logic */
  height:       0;
  opacity:      0;
  overflow:     hidden;
  transition:   all 0.1s ease;
  margin-left:  1ch;
  padding-left: 1ch;
}

.tree input:checked ~ ul {
  height:  auto;
  opacity: 1;
}


.tree li { /* layout for every row (folder or file) */
  position:    relative;
  white-space: nowrap;
}

.tree-node { position: relative }

.tree li li { /* vertical branch line */
  position:     relative;
  padding-left: 2px;
}

.tree li li::before {
  position:    absolute;
  left:        -1ch;
  top:         0;
  height:      100%;
  border-left: 1px solid;
  content:     "";
}

.tree li li:last-child::before { height: 0.75em }

.tree li li::after { /* horizontal branch line */
  position:   absolute;
  left:       -1ch;
  top:        0.75em;
  width:      1ch;
  border-top: 1px solid;
  content:    "";
}

.tree label { /* folder emojis & labels */
  display:        inline-block;
  user-select:    none;
  cursor:         pointer;
  vertical-align: middle;
  margin-right:   10ch;
  padding:        2px 4px;
}

.tree a,
.tree label {
  border-radius: 4px;
  transition:    box-shadow 0.1s ease-in-out;
}

.tree     a:hover,
.tree label:hover {
  background-color: var(--hover-bg);
  box-shadow:       2px 2px 2px rgb(0 0 0 / 15%);
}

.tree label::before {
  display:        inline-block;
  width:          2ch;
  content:        "\1F4C1"; /* closed folder */
  vertical-align: middle;
  font-weight:    normal;
}

.tree input:checked ~ .tree-node label::before { content: "\1F4C2" } /* open folder */

.tree .src:focus-within { /* persists background color highlight after clicking on a link */
  background-color: var(--hover-bg);
  border-radius:    4px;
  box-shadow:       1px 1px 1px rgb(0 0 0 / 10%);
}

.tree .src:focus-within:hover {
  box-shadow:       2px 2px 2px rgb(0 0 0 / 15%);
}

span.src {
  display:        inline-block;
  vertical-align: middle;
  margin-right:   8ch; /* 8ch == len("100.0%") + 2ch gap */
  white-space:    nowrap;
}

span.cov {
  position:    absolute;
  top:         50%;
  right:       10px;
  width:       8ch;
  font-family: Menlo, monospace;
  font-size:   small;
  font-weight: normal;
  font-style:  italic;
  text-align:  right;
  transform:   translateY(-50%);
}