#tree {
    display: none;

    overflow: auto;
    flex: 0 0 auto;
    order: 1;

    padding: 16px 16px 16px 8px;
    border-right: 1px solid @col-border;
    white-space: nowrap;
    max-width: 250px;
    overflow-x: hidden;
    font-weight: lighter;

    a, a:active, a.visited {
        display: block;
        margin-left: 20px;
        padding: 3px 0;
        text-decoration: none;
        color: @col-text;

        &:hover {
            color: @col-text-hover;
        }
    }

    .active > a {
        font-weight: bold;
    }

    .indicator {
        display: block;
        float: left;
        padding: 3px 0;
        position: relative;
        top: -2px;
        cursor: pointer;

        img {
            .eased-transition;
            width: 20px;
            height: 20px;
        }
        &.open {
            img {
                transform: rotate(90deg);
                zoom: 1;
            }
        }
        &.unknown {
            opacity: 0.3;
        }
        &.none {
            opacity: 0;
            cursor: inherit;
        }
    }

    .icon {
        position: relative;
        top: -2px;

        img {
            width: 20px;
            height: 20px;
        }
    }

    .label {
        margin: 0 0 0 4px;
    }

    .content {
        list-style: none;
        margin: 0;
        padding: 0 0 0 20px;
    }
}