.list-tree  {
    --tree-clr: dimgray;
    --tree-font-size: 1rem;
    --tree-item-height: 2;
    --tree-offset: 1.5rem;
    --tree-thickness: 2px;
    --tree-style: solid;
}

    .list-tree ul {
        display: grid;
        list-style: none;
        font-size: var(--tree-font-size);
    }

    .list-tree li {
        line-height: var(--tree-item-height);
        padding-inline-start: var(--tree-offset);
        border-left: var(--tree-thickness) var(--tree-style) var(--tree-clr);
        position: relative;
        text-indent: .5rem;
        &:last-child

{
    border-color: transparent; /* hide (not remove!) border on last li element*/
}

& label {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0px;
    margin: 0px;
    left: -6px !important;
    position: relative !important;
}

& span {
    color: black;
    font-size: 0.8rem;
}

&::before {
    content: '';
    position: absolute;
    top: calc(var(--tree-item-height) / 2 * -1 * var(--tree-font-size) + var(--tree-thickness));
    left: calc(var(--tree-thickness) * -1);
    width: calc(var(--tree-offset) + var(--tree-thickness) * 2);
    height: calc(var(--tree-item-height) * var(--tree-font-size));
    border-left: var(--tree-thickness) var(--tree-style) var(--tree-clr);
    border-bottom: var(--tree-thickness) var(--tree-style) var(--tree-clr);
}

&::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--tree-clr);
    top: calc(var(--tree-item-height) / 2 * 1rem);
    left: var(--tree-offset);
    translate: calc(var(--tree-thickness) * -1) calc(var(--tree-thickness) * -1);
}

    & li li {
        --tree-style: dotted;
    }
}

.list-tree li li li {
    --tree-style: dashed !important;
    border-left: none;
}

    .list-tree li li li li  {
        --tree-style: dotted !important;
        border-left: none;
    }


/* general styling */
*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --clr-bg: #222;
    --clr-primary: #f5f5f5;
    --clr-secondary: #075985;
}



/*h1 {
    font-size: clamp(1rem, 2.5vw + 0.25rem, 1.2rem);
    font-weight: 500;
    line-height: 1.6;
}*/

code,
pre {
    display: inline-block;
    color: #38bdf8;
    border: 1px solid hsl(from var(--clr-primary) h s 50% / 0.5);
    padding: 0 1rem;
    border-radius: 5px;
}

pre {
    white-space: pre-wrap;
}

em {
    font-size: 0.8rem;
}