body {
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
        sans-serif;
    font-size: 14pt;
    padding: 1rem 5rem;
}

.wrapper {
    display: flex;
}

ul {
    list-style-type: none;
}

section.tree-structure {
    width: 50%;
    background-color: aquamarine;
}

section.tree-structure-expected {
    width: 50%;
    padding: 0 2rem 0 2rem;
    .selected-first {
        color: green;
    }
    .selected-last {
        color: red;
    }
    .not-selected {
        color: black;
    }
}

section.example {
    margin-top: 5rem;
    img {
        max-width: 100%;
    }
}

// ------------------------------------------------

$border-img: url("../img/border.png");
$dot-img: url("../img/dot.png");
$border_width: 20px;
$border-margin-right: 15px;
$left-padding-unit: 16px;

ul.subnav {
    // debug colors: level one
    > li {
        background-color: rgb(242, 242, 168);
    }
    > li > ul > li {
        background-color: rgb(199, 167, 255);
    }
    > li > ul > li > ul > li {
        background-color: rgb(174, 249, 174);
    }

    // level one
    padding-left: $left-padding-unit;

    // level two
    > li > ul {
        padding-left: $left-padding-unit * 2;
    }

    // level three
    > li > ul > li > ul {
        padding-left: $left-padding-unit * 2;
    }

    li {
        a {
            display: flex;
            padding: 0;
            cursor: pointer;
            height: 56px;
            align-items: center;
            text-decoration: none;

            // default: just border line
            &::before {
                content: " ";
                background-color: yellow;
                display: inline-block;
                width: $border_width;
                margin-right: $border-margin-right;
                height: 100%;
                background-image: $border-img;
                background-repeat: no-repeat;
                background-position: top center;
            }
        }

        // first item: dot + line down
        &:first-of-type {
            > a {
                height: 57px;
                &::before {
                    background-color: transparent;
                    align-self: flex-end;
                    height: 30px;
                    background-image: $border-img, $dot-img;
                }
            }
        }

        // last item: dot + line up
        &:last-of-type {
            margin: 0;
            > a {
                &::before {
                    background-color: transparent;
                    align-self: flex-start;
                    height: 30px;
                    background-image: $border-img, $dot-img;
                    background-position: bottom center;
                }
            }
        }

        // single item: just a dot
        &:first-of-type:last-of-type {
            > a {
                &::before {
                    background-image: $dot-img;
                }
            }
        }
    }

    // level three item: insert extra line left to connect level two items
    > li > ul :not(:last-of-type) li {
        display: flex;
        margin-left: -$left-padding-unit * 2;
        &::before {
            content: " ";
            width: $border_width;
            margin-right: $border-margin-right;
            background-image: $border-img;
            background-repeat: repeat-y;
            background-position: top center;
        }
    }
}