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;

ul.level-one li {
    padding-left: 16px;
    background-color: rgb(242, 242, 168);
}

ul.level-two li {
    padding-left: 32px;
    background-color: rgb(199, 167, 255);
}

ul.level-three li {
    padding-left: 32px;
    background-color: rgb(174, 249, 174);
}

ul.subnav {
    padding-left: 0;

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

            &::before {
                content: " ";
                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;
            }
        }
    }

    > li {
        &:first-of-type {
            > a {
                height: 57px;
                &::before {
                    align-self: flex-end;
                    height: 30px;
                    background-image: $border-img, $dot-img;
                }
            }
        }

        &:last-of-type {
            margin: 0;
            > a {
                &::before {
                    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;
                }
            }
        }
    }

    ul.level-two :not(:last-of-type) li {
        display: flex;
        padding-left: 0;
        &::before {
            content: " ";
            width: $border_width;
            margin-right: $border-margin-right;
            background-image: $border-img;
            background-repeat: repeat-y;
            background-position: top center;
        }
    }
}