ul.folder {
    --spacing: 1.5em;
    --indent: calc(var(--spacing)*1.5); /* to li and summary */
    --li-margin-left: calc(var(--spacing)/2);
    --li-padding-left: calc(var(--indent) - var(--li-margin-left));
    --text-middle: calc(var(--spacing)/3);
    --graph-color: #aaa; /* coloring for borders */
    --graph-color-close: #000;
    padding: 0; margin: 0;
    font-family: monospace;
    font-size: 1.25vw;
    line-height: calc(var(--spacing)*1.1);
}

ul.folder li { /* a |-line between the margin and padding */
    display: block; /* replace the default list-style; */
    position: relative; /* to fit absolute in ::before */
    margin-left: calc(var(--li-margin-left) - 2px);
    padding-left: var(--li-padding-left);
    border-left: 2px solid var(--graph-color);
}

ul.folder li:last-child { /* no |-line */
    border-color: transparent;
}

ul.folder li::before,
ul.folder summary::before {
    display: block;
    position: absolute;
}

ul.folder li::before { /* an L-shape */
    content: "";
    --L-width: var(--li-padding-left);
    width: var(--L-width);
    height: var(--L-width);
    border: solid var(--graph-color);
    border-width: 0 0 2px 2px;
    /* un-indent to align with the |-line at li:padding-left */
    margin-left: calc(-2px - var(--li-padding-left));
    margin-top: calc(0px - var(--text-middle));
}

ul.folder summary {
    display: block; /* replace the default summary-style */
    cursor: pointer;
    font-weight: bold;
    margin-left: var(--indent);
}

ul.folder summary::before { /* a small square */
    content: "-";
    --SQ-width: calc(var(--spacing)*0.87);
    width: var(--SQ-width);
    height: var(--SQ-width);
    border: 2px solid var(--graph-color-close);
    /* un-indent to align with the |-line at li:padding-left */
    margin-left: calc(-1px - var(--li-padding-left) - var(--SQ-width)/2);
    margin-top: calc(var(--spacing) - var(--SQ-width));
    line-height: calc(var(--SQ-width) - 4px); /* for center middle */
    text-align: center; vertical-align: middle;
}

ul.folder details[open] > summary::before {
    content: "+";
    border: 2px solid var(--graph-color);
}

ul.folder summary>span,
ul.folder li a {
    text-decoration: none;;
    padding: 0.5ex 0;
}

ul.folder li a:hover {
    color: #fff; background-color: #f70;
}

ul.folder summary:hover > span {
    color: #fff; background-color: #000;
}