@import "./var";

.#{$prefix}tree{
    position: relative;
    max-width: $tree-width;    //经设计确认，默认宽度为420，若实际场景有差异，可再调整
    color:$color-text;
}
.#{$prefix}tree__node{
    position: relative;
    line-height: 1;
    background-color: $tree-color-bg;
    white-space: nowrap;
    
    &.is-selected{
        >.#{$prefix}tree__node-content .#{$prefix}tree__label{
            background-color: $tree-color-bg-hover;
        }   
    }
    
}
.#{$prefix}tree__space{
    font-size: 0;
    display: inline-block;
    width:$tree-subitem-indentaion;
    height: $tree-item-height;
}
.#{$prefix}tree__node-content{
    font-size: 0;
    // padding: 7px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    // &:hover{background-color: #f2f2f2;}
}
.#{$prefix}tree__switcher{
    display: inline-block;
    margin-right:4px;
    width: $tree-switcher-width;
    min-width: $tree-switcher-width; //后面文字过长的时候，会挤压switcher的宽度！很奇怪是不是！
    height: $tree-item-height;
    padding: ($tree-item-height - $tree-switcher-width)/2 0px;
}
.#{$prefix}tree__label{
    display: flex;
    flex:1;
    font-size: 0;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: ($tree-item-height - 16px)/2 4px;
    &:hover{
        background-color: $tree-color-bg-hover;
        cursor: pointer;
    }
    .#{$prefix}icon{
        margin-right:4px;
        flex:none;
    }
}
.#{$prefix}tree__node.is-disabled,
.#{$prefix}tree__node.is-nohighlight,
.#{$prefix}tree__node--transparent{
    >.#{$prefix}tree__node-content .#{$prefix}tree__label:hover{
        background-color: transparent;
        cursor: default;
    }
    &.is-selected{
        >.#{$prefix}tree__node-content .#{$prefix}tree__label{
            background-color: $tree-color-bg-hover;
        }   
    }
}
.#{$prefix}tree__node.is-nohighlight{

    >.#{$prefix}tree__node-content >.#{$prefix}tree__label,
    >.#{$prefix}tree__node-content >.#{$prefix}tree__label:hover{
        cursor: not-allowed;
        color:$color-text-disabled;
    }
    
}
.#{$prefix}tree__label-title{
    display: inline-block;
    vertical-align: middle;
    line-height:1.5;
    font-size: $tree-font-size-default;
    max-width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.#{$prefix}tree .#{$prefix}form-check{
    padding-left:26px;
    width:100%;
    max-width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top:($tree-item-height - 16px)/2;
    padding-bottom:($tree-item-height - 16px)/2;
    margin:-($tree-item-height - 16px)/2 0;
    cursor: pointer;
    
    .#{$prefix}checkbox{
        flex:0 0 16px;
        top:($tree-item-height - 16px)/2;
    }
    .#{$prefix}form-check__label{
        display: inline-block;
        vertical-align: middle;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.#{$prefix}tree .#{$prefix}checkbox{
    margin-right:10px;
}

.#{$prefix}tree__action{
    position: absolute;
    right:0;
    top:0;
    // background-color:opacity($tree-color-bg-hover,0.9);
    background-color:rgba($tree-color-bg-hover,0.95);
    display: flex;
    visibility: hidden;
    padding-left:10px;
    // padding:3px 0;
    height: $tree-item-height;
    align-items: center;
    .#{$prefix}btn--icon{
        padding:($tree-item-height - 16px)/2 4px;
    }
    .#{$prefix}text--link{
        font-size: $tree-font-size-default;
        vertical-align: middle;
        margin-right:10px;
        line-height: $tree-item-height;
        display: inline-block;
        &:hover{
            text-decoration: none;
        }
    }
}
.#{$prefix}tree__label:hover .#{$prefix}tree__action{
    //display: flex;
    visibility: visible;
    }


// .#{$prefix}tree .#{$prefix}icon{
//     position: relative;
// }
// .#{$prefix}tree__node{
//     line-height: 1;
//     background-color:#fff;
//     padding: 7px 0;
//     .#{$prefix}tree__node-content{
//         &::before{
//             content:"";
//             display: block;
//             position: absolute;
//             left:0;
//             right:0;
//             height: 16px;
//         }
//         &:hover::before{background-color: #f2f2f2;}
//     }

// }


.#{$prefix}tree__subtree{
    .#{$prefix}tree__node{
        padding:0px 0 0px 20px;
    }
    // .#{$prefix}tree__node-content{
    //      padding: 0px 0 0px 16px;
    // }
}

// 整行反馈
.#{$prefix}tree.#{$prefix}tree--full-line{
    .#{$prefix}tree__node-content:hover{
        background-color: $tree-color-bg-hover;
        cursor: pointer;
        .#{$prefix}tree__action{
            //display: flex;
            visibility: visible;
        }
    }
    .#{$prefix}tree__node.is-selected{
        >.#{$prefix}tree__node-content {
            background-color: $tree-color-bg-hover;
        }  
    }
    .#{$prefix}tree__node--transparent{
        >.#{$prefix}tree__node-content:hover{
            background-color: transparent;
            cursor: default;
        }
        &.is-selected{
            >.#{$prefix}tree__node-content{
                background-color: $tree-color-bg-hover;
            }   
        }
    }
}


// 仅点CheckBox可选中
.#{$prefix}tree.#{$prefix}tree--checkbox-separate{
    .#{$prefix}tree__label{
        padding:0;
        align-items: center;
        

        .#{$prefix}tree__label-title{
            padding:($tree-item-height - 18px)/2 4px;
            cursor: pointer;
            flex:1;
        }
        &:hover{
            background-color: transparent;
            .#{$prefix}tree__action{
                //display: none;
                visibility: hidden;
            }
        }
        &:hover + .#{$prefix}tree__action{
            //display: none;
            visibility: hidden;
        }
        .#{$prefix}tree__label-title:hover{
            background-color: $tree-color-bg-hover;
            .#{$prefix}tree__action{
                //display: flex;
                visibility: visible;
            }
        }
        .#{$prefix}form-check{
            width:auto;
            height: $tree-item-height;
            padding-left: 22px;
        }
        
    }
    .#{$prefix}tree__action.is-shown{
        //display: flex;
        visibility: visible;
    }
    .#{$prefix}checkbox{
        margin-right: 6px;
    }
    .#{$prefix}tree__node.is-selected{
        >.#{$prefix}tree__node-content .#{$prefix}tree__label{
            background-color: transparent;
            .#{$prefix}tree__label-title{
                background-color: $tree-color-bg-hover;
            } 
        }
    }

    .#{$prefix}tree__node--transparent{
        >.#{$prefix}tree__node-content .#{$prefix}tree__label-title:hover{
            background-color: transparent;
            cursor: default;
        }
        &.is-selected{
            >.#{$prefix}tree__node-content .#{$prefix}tree__label{
                background-color: transparent;
                .#{$prefix}tree__label-title{
                    background-color: $tree-color-bg-hover;
                } 
            }   
        }
    }
}