.tree {
    user-select: none;
    padding-bottom: 1.6em;
    list-style: none
}

@media only screen and (min-width: 960px) {
    .tree li::before {
        left: calc( 1.166em - 8px )
    }

    .tree li .text {
        margin-left: 2.915em
    }

    .tree li li::before {
        left: calc( 2.332em - 8px )
    }

    .tree li li .text {
        margin-left: 4.081em
    }

    .tree li li li::before {
        left: calc( 3.498em - 8px )
    }

    .tree li li li .text {
        margin-left: 5.247em
    }

    .tree li li li li::before {
        left: calc( 4.664em - 8px )
    }

    .tree li li li li .text {
        margin-left: 6.413em
    }

    .tree li li li li li::before {
        left: calc( 5.83em - 8px )
    }

    .tree li li li li li .text {
        margin-left: 7.579em
    }

    .tree li li li li li li::before {
        left: calc( 6.996em - 8px )
    }

    .tree li li li li li li .text {
        margin-left: 8.745em
    }

    .tree li li li li li li li::before {
        left: calc( 8.162em - 8px )
    }

    .tree li li li li li li li .text {
        margin-left: 9.911em
    }
}

@media only screen and (max-width: 960px) {
    .tree li::before {
        left: calc( 1em - 8px )
    }

    .tree li .text {
        margin-left: 2.5em
    }

    .tree li li::before {
        left: calc( 2em - 8px )
    }

    .tree li li .text {
        margin-left: 3.5em
    }

    .tree li li li::before {
        left: calc( 3em - 8px )
    }

    .tree li li li .text {
        margin-left: 4.5em
    }

    .tree li li li li::before {
        left: calc( 4em - 8px )
    }

    .tree li li li li .text {
        margin-left: 5.5em
    }

    .tree li li li li li::before {
        left: calc( 5em - 8px )
    }

    .tree li li li li li .text {
        margin-left: 6.5em
    }

    .tree li li li li li li::before {
        left: calc( 6em - 8px )
    }

    .tree li li li li li li .text {
        margin-left: 7.5em
    }

    .tree li li li li li li li::before {
        left: calc( 7em - 8px )
    }

    .tree li li li li li li li .text {
        margin-left: 8.5em
    }
}

.tree li {
    position: relative;
    cursor: pointer;
    display: block
}

.tree li::before {
    position: absolute;
    z-index: 1;
    top: .7em
}

.tree li a {
    text-decoration: none;
    color: inherit
}

.tree li a:hover {
    text-decoration: underline
}

.tree li a:hover .badge.badge_new {
    text-decoration: underline;
    text-decoration-color: #8bc34a
}

.tree li .text {
    display: inline-block;
    padding: .25em 0;
    position: relative;
    margin-right: auto
}

.tree li .text::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-left: -1.5em;
    margin-right: .5em;
    background-repeat: no-repeat
}

.tree li .badge {
    margin: 0 .5em
}

.tree li .badge:last-of-type {
    margin-right: 1.333em
}

.tree li .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end
}

.tree li .wrapper:hover {
    background-color: #dddc
}

.tree li .wrapper--active {
    overflow: hidden;
    background-color: #dddc
}

.tree li .wrapper--active:hover {
    background-color: #dddc
}

.tree li .tree__item-nested-list {
    height: auto;
    overflow: visible
}

.tree li .tree__item-nested-list--hidden {
    height: 0;
    overflow: hidden
}

.tree .toggler--collapsed>ul {
    display: none
}

.tree .toggler--expanded>ul {
    display: block
}

.package::before {
    background-image: url(../img/box-orange.svg)
}

.module::before {
    background-image: url(../img/box-red.svg)
}

.namespace::before {
    background-image: url(../img/box-brown.svg)
}

.folder {
    width: 100%
}

.folder::before {
    background-image: url(../img/folder.svg)
}

.class::before {
    background-image: url(../img/cog.svg)
}

.interface::before {
    background-image: url(../img/arrows.svg)
}

.typedef::before {
    background-image: url(../img/data.svg)
}

.guide::before,.sdk::before {
    background-image: url(../img/book.svg)
}

.badge {
    margin: 0 .25em;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    border-radius: 20px;
    padding: .1em .6em;
    vertical-align: middle
}

.badge .badge__text {
    display: none
}

.badge_new {
    background: #8bc34a;
    color: #fff
}

.badge_premium {
    background-image: url(../img/star-in-circle.svg);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block
}