$table-prefix:#{$css-prefix}table;
$icon-prefix:#{$css-prefix}icon;
$nodata-prefix:#{$css-prefix}nodata;
.#{$table-prefix}-wrap{
    width: inherit;
    height: 100%;
    max-width: 100%;
}
.#{$table-prefix}{
    width: inherit;
    height: 100%;
    max-width: 100%;
    // overflow: hidden; fix:tooltips
    color: $table-td-color;
    font-size: $table-td-font-size;
    box-sizing: border-box;
    &-title{
        text-align: center;
        font-size: $font-size-base;
    }
    &-header{
    }
    &-body{
        position: relative;
        table{
            tr{
                &:hover,&:active{
                    background-color: $table-td-hover-bg;
                }
                &.active{
                    background-color: $table-td-highlight-bg;
                }
                td{
                    &.#{$table-prefix}-td-nodata{
                        height:$table-nodata-height;
                        display: block;
                        .#{$nodata-prefix}-fix{
                            height:72px;
                        }
                    }
                    &.#{$table-prefix}-td-loading{
                        height:$table-loading-height;
                        display: block;
                    }
                }
            }
        }
        .#{$css-prefix}loading-fix{
            z-index:10;
        }
    }
    &-footer{
        &-pull-bar{
            text-align: center;
        }
    }
    table{
        table-layout: fixed;
        font-size:$table-td-font-size;
        color: $table-td-color;
        width: 100%;
        border-top-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-left-width: 0px;
        -webkit-border-horizontal-spacing: 0px;
        -webkit-border-vertical-spacing: 0px;
    }
    thead{
        color: $table-th-color;
        font-weight: normal;
        tr{
            background: $table-thead-bg;
            border-radius: 4px 4px 0 0;
        }
    }
    tr{
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }
    td,th{
        padding: $table-td-padding;
        min-width: 0;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
    }
    .cell{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        position: relative;
        // padding-left: 16px;
        // padding-right: 16px;
        .checkbox-wrap{
            white-space: nowrap;
            cursor: pointer;
            outline: none;
            display: inline-block;
            line-height: 1;
            position: relative;
            vertical-align: middle;
            color: $table-icon-color;
            font-weight: 500;
            font-size: 14px;
            .checkbox{
                display: inline-block;
                position: relative;
                border: 1px solid $border-color-base;
                border-radius: 2px;
                box-sizing: border-box;
                width: $table-check-size;
                height: $table-check-size;
                background-color: #fff;
                z-index: 1;
                transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
                &:after{
                    box-sizing: content-box;
                    content: "";
                    border: 1px solid #fff;
                    border-left: 0;
                    border-top: 0;
                    height: $table-check-icon-height;
                    left: $table-check-icon-left;
                    position: absolute;
                    top: 1px;
                    transform: rotate(45deg) scaleY(0);
                    width: $table-check-icon-width;
                    transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
                    transform-origin: center;
                }
                &:hover,&:active{
                    border-color: $primary-color;
                }
            }
            &.active{
                .checkbox{
                    background-color: $primary-color;
                    border-color: $primary-color;
                    &:after{
                        transform: rotate(45deg) scaleY(1);
                    }
                }
            }
        }
    }
    .expand-warp{
        display:inline-block;
        transition: transform .2s ease-in-out;
        &.expanded{
            transform: rotate(90deg);
        }
    }
    .sort-wrap{
        position: absolute;
        top:50%;
        margin-top:-10px;
        width: 16px;
        height: 18px;
        line-height: 23px;
        right:-20px;
        display: inline-block;
        vertical-align: middle;
        i{
            position:absolute;
            top:2px;
            &:before{
                color:$table-icon-color;
            }
            &.active{
                &:before{
                    color:$primary-color;
                }
            }
            &.up{
                left:0;

            }
            &.down{
                right:0;
            }
        }
    }
    .tips-wrap.vsu-tooltip /deep/{
        .vsu-tooltip-wrap{
            width: 230px;
        }    
    }
    .bubble-wrap.vsu-bubble{
        vertical-align: middle;
        margin-left: 8px;
        .vsu-bubble-wrap{
            min-width: 200px;
            .vsu-bubble-text{
                tr{
                    background-color: transparent;
                    td{
                        border: 0;
                        color: #fff;
                        padding: 0;
                    }
                }
            }
        }
        .vsu-bubble-target{
            i{
                &:before{
                    font-size: $input-icon-size;
                    color: $primary-color;
                }
            }
        }
    }
    th{
        white-space: nowrap;
        // overflow: hidden; fix:tooltips
        user-select: none;
        text-align: left;
        font-weight:normal;
        .cell{
            overflow: visible;
            position: relative;
            word-wrap: normal;
            vertical-align: middle;
            // width: 100%;
            display: inline-block;
            box-sizing: border-box;
            text-overflow: ellipsis;
        }
    }
    &-clickable{
    }
    &-strip{
        table{
            th,td{
                border-bottom: 1px solid $table-border-color;
            }
        }
    }
    &-zebra{
        table{
            th,td{
                border-bottom: 1px solid $table-border-color;
            }
            tr{
                &:nth-child(odd){
                    background: $table-td-stripe-bg;
                }
            }
        }
        
    }
    &-bordered{
        border: 1px solid $table-border-color;
        border-right: none;
        border-bottom: none;
        table{
            th,td{
                border-bottom: 1px solid $table-border-color;
                border-right: 1px solid $table-border-color;
            }
        }
        
    }
}