.view-tree-leaf {
    --view-leaf-lines-offset: 0;
    position: relative;
    display: grid;
    grid-template-columns: 20px auto;
    grid-template-areas:
        "toggle content"
        "toggle children";
    background-image:
        linear-gradient(to right, rgba(153, 153, 153, 0.5), rgba(153, 153, 153, 0.5)),
        linear-gradient(to right, rgba(153, 153, 153, 0.5), rgba(153, 153, 153, 0.5));
    background-size:
        1px calc(1em - 7px * var(--view-leaf-lines-offset, 0)),
        1px 100%;
    background-position:
        5px top,
        5px calc(1em + 6px * var(--view-leaf-lines-offset, 0));
    background-repeat: no-repeat;
}
.view-tree-leaf.has-children:not(.non-collapsible),
.view-tree-leaf.has-children.collapsed {
    --view-leaf-lines-offset: 1;
}
.view-tree-leaf.last,
:not(.incomplete) > .view-tree-leaf:last-child {
    background-image:
        linear-gradient(to right, rgba(153, 153, 153, 0.5), rgba(153, 153, 153, 0.5));
}

.view-tree-leaf-toggle {
    grid-area: toggle;
    visibility: hidden;
    display: inline-block;
    position: relative;
    top: 1em;
    margin-top: -3px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    border: 1px solid currentColor;
    margin-right: 9px;
    font-size: 10px;
    line-height: 8px;
    text-align: center;
    color: rgba(127, 127, 127, 0.8);
    cursor: pointer;
}
.view-tree-leaf-toggle:hover {
    color: #808080;
}
.view-tree-leaf.has-children > .view-tree-leaf-toggle {
    visibility: visible;
}
.view-tree-leaf.non-collapsible:not(.collapsed) > .view-tree-leaf-toggle {
    visibility: hidden;
}
.view-tree-leaf-toggle::before {
    content: '–';
}
.view-tree-leaf.collapsed > .view-tree-leaf-toggle::before {
    content: '+';
}
.view-tree-leaf-toggle::after {
    content: '';
    visibility: visible;
    position: absolute;
    top: 4px;
    left: 5px;
    right: -6px;
    height: 1px;
    background-color: rgba(153, 153, 153, 0.5);
    pointer-events: none;
}
.view-tree-leaf.has-children:not(.non-collapsible) > .view-tree-leaf-toggle::after,
.view-tree-leaf.has-children.collapsed > .view-tree-leaf-toggle::after {
    left: 11px;
}

.view-tree-leaf-content {
    grid-area: content;
    display: inline-block;
}
.view-tree-leaf-content::before {
    content: '\200B';
    float: left;
}
.view-tree-leaf-content:empty::before {
    content: '<empty>';
    color: #888;
}

.view-tree-leaf-children {
    grid-area: children;
    list-style: none;
    margin: 0;
    padding: 0;
}
.view-tree-leaf.collapsed > .view-tree-leaf-children {
    display: none;
}