details>summary {
    list-style-type: none;
    outline: none;
    cursor: pointer;
    border: 1px solid #fff;
    padding: 5px;
    border-radius: 5px;
}

details>summary::-webkit-details-marker {
    display: none;
}

.tree{
    --spacing : 1.5em;
    --radius  : 10px;
    font-size: 20px;
}

.tree li{
    display      : block;
    position     : relative;
    padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul{
    margin-left  : calc(var(--radius) - var(--spacing));
    padding-left : 0;
}

.tree ul li{
    border-left : 2px solid #ddd;
}

.tree ul li:last-child{
    border-color : transparent;
}

.tree ul li::before{
    content      : '';
    display      : block;
    position     : absolute;
    top          : calc(var(--spacing) / -2);
    left         : -2px;
    width        : calc(var(--spacing) + 2px);
    height       : calc(var(--spacing) + 1px);
    border       : solid #ddd;
    border-width : 0 0 2px 2px;
}

.tree summary{
    display : block;
    cursor  : pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
    display : none;
}

.tree summary:focus{
    outline : none;
}

.tree summary:focus-visible{
    outline : 1px dotted #000;
}

.tree li::after,
.tree summary::before{
    content       : '';
    display       : block;
    position      : absolute;
    top           : calc(var(--spacing) / 2 - (2* var(--radius)));
    left          : calc(var(--spacing) - var(--radius) - 1px);
    width         : calc(2 * var(--radius));
    height        : calc(2 * var(--radius));
    border-radius : 50%;
    /*background    : #ddd;*/
}

.tree summary::before{
    z-index    : 1;
/*background : #4e477f url('expand-collapse.svg') 0 0;*/
}

.tree details>summary::before {
    content:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024\
 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
  padding-top: -5px;
}
.tree details[open]>summary:before {
    content:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024\
 Fonticons, Inc.--><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
}
.tree details[open] ::-webkit-details-marker
{
    transform: rotate(180deg);
}