@tree-prefix-cls: ~"@{css-prefix}tree";

.@{tree-prefix-cls} {
    line-height: 16px;
    font-size: 0;

    span.querySpan{
        color: @primary-color;
    }

    ul{
        list-style: none;
        margin: 0;
        padding: 0;
        li{
            list-style: none;
            //margin: 8px 0;
            padding: 0;
            white-space: nowrap;
            outline: none;
            position: relative;

            &:before{
                width: 15px;
                height: 1px;
                background-color: #efefef;
                content: '';
                display: inline-block;
                vertical-align: middle;
                top: -5px;
                position: relative;
            }

            >span,label{
                margin-bottom: 8px;
                vertical-align: middle;
            }

        }




    }



    >ul{
        >li{
            &:before{
                width: 0;
            }

            >ul{
                margin-left: 7px;
                padding: 0;
                border-left: 1px solid #efefef;
            }

        }
    }

    li{
        ul{
            margin-left: 22px;
            border-left: 1px solid #efefef;
            padding: 0;
        }

        >ul:last-child{
            border: none;

            >li:last-child{
                &:after{
                    width: 1px;
                    height: 13px;
                    content: '';
                    position: absolute;
                    display: inline-block;
                    left: 0;
                    top: -6px;
                    background-color: #efefef;
                }
            }
        }
    }
    &-title {
        display: inline-block;
        margin: 0;
        padding: 0 4px;
        border-radius: @btn-border-radius-small;
        font-size: @font-size-small;
        cursor: pointer;
        vertical-align: top;
        color: @text-color;
        transition: all @transition-time @ease-in-out;
        &:hover {
            background-color:@background-color-select-hover;
        }
        &-selected, &-selected:hover{
            background-color:@background-color-select-hover;
        }
    }
    &-arrow{
        cursor: pointer;
        width: 14px;
        text-align: center;
        display: inline-block;
        font-size: @font-size-small;
        margin-right: 8px;
        i {
            transition: all @transition-time @ease-in-out;
            font-size: @font-size-base;
            vertical-align: middle;
            color:   @primary-color;
            vertical-align: text-bottom;
            position: relative;

            &:after{
                width: 0;
                height: 0;
                content: '';
                position: absolute;
                display: inline-block;
                left: 7px;
                top: 14px;
                background-color: #efefef;
            }
        }
        &-open{
            i {
                &:after{
                    width: 1px;
                    height: 13px;
                    content: '';
                    position: absolute;
                    display: inline-block;
                    left: 7px;
                    top: 14px;
                    background-color: #efefef;
                }
            }
        }
        //&-hidden{
        //    cursor: auto;
        //    i{
        //        display: none;
        //    }
        //}
        &-disabled{
            cursor: @cursor-disabled;
        }
    }


    .@{checkbox-prefix-cls}-wrapper{
        margin-right: 0;
        margin-left: 0;
    }
}