//
// Tree
// --------------------------------------------------

ul.tree {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;

    li,
    a,
    span {
        cursor: pointer;
        padding: 0;
        margin: 0;
        color: @color-gray-50;
        font-weight: normal;
        text-decoration: none;

        &:hover {
            text-decoration: none;
        }
    }

    li {
        position: relative;
        // Vertical line between nods
        &:before {
            content: '';
            position: absolute;
            top: -@line-height-100 * 0.5;
            left: @line-height-100 * 0.25;
            border-left: 1px dotted #ccc;
            height: 100%;
        }

        &:first-child:before {
            top: @line-height-100 * 0.25;
            height: @line-height-100 * 0.25;
        }
        // Horizontal line before each leaf
        a {
            padding-left: @padding-base-horizontal;

            &:before {
                content: ' ';
                position: absolute;
                border-bottom: 1px dotted #ccc;
                left: @line-height-100 * 0.25;
                top: @line-height-100 * 0.5;
                width: @line-height-100 * 0.25;
            }
        }

        span {
            &.tree-toggle {
                &:before {
                    font-family: @icon-font-name;
                    content: @icon-plus-circle; // "+"
                    .cms-icon-50;
                    color: @color-blue-70;
                    background-color: @body-bg;
                    margin-right: @base-unit * 0.25;
                    // Overlay of dotted lines
                    z-index: 1;
                    position: relative;
                }

                &.active {
                    &:before {
                        font-family: @icon-font-name;
                        content: @icon-minus-circle; // "-"
                        color: @color-blue-70;
                        background-color: @body-bg;
                        margin-right: @base-unit * 0.25;
                        // Overlay of dotted lines
                        z-index: 1;
                        position: relative;
                    }
                }
            }
        }
    }

    & > li {
        & ul.tree {
            display: none;
        }
    }

    ul.tree {
        margin-left: @padding-xlarge-horizontal;
    }
}