@table-prefix-cls: ~"@{css-prefix}table";
@table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
@checkbox-wrapper: ~"@{css-prefix}checkbox-wrapper";
@table-popper: ~"@{css-prefix}table-popper";
@poptip-body: ~"@{css-prefix}poptip-body";


.@{table-prefix-cls} {
    &-wrapper{
        position: relative;
        border: 1px solid @border-color-base;
        width: 100%;
        border-bottom: 0;
        border-right: 0;
    }
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow-x: auto;
    color: @text-color;
    font-size: @font-size-small;
    background-color: #fff;

    box-sizing: border-box;
    position: relative;

    &-hide{
        opacity: 0;
    }

    &:before{
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: @border-color-base;
        z-index: 1;
    }

    &:after{
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: @border-color-base;
        z-index: 3;
    }

    &-with-header{
        //border-radius: @border-radius-base @border-radius-base 0 0;
    }

    &-with-footer{
        //border: 1px solid @border-color-base;
        //border-radius: 0 0 @border-radius-base @border-radius-base;
    }

    &-with-header&-with-footer{
        //border-radius: @border-radius-base;
    }

    &-title, &-footer{
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid @border-color-split;
    }
    &-footer{
        border-bottom: none;
    }
    &-relative{
        td {
            position: relative;
            z-index: 0;
        }
    }

    &-header{
        overflow: hidden;
        border-right: 1px solid  @border-color-base;
        table{
            width: auto!important;
            table-layout: fixed;
        }
    }
    &-body{
        overflow-y: auto;
        //position: relative;


    }
    &-overflowX{
        overflow-x: scroll;
    }
    &-overflowY{
        overflow-y: scroll;
    }
    &-tip{
        overflow-x: auto;
        overflow-y: hidden;
        //position: relative;
        tbody{
            display: table;
        }
    }
 
    &-with-fixed-top&-with-footer{
        .@{table-prefix-cls}-footer{
            //border-top: 1px solid @border-color-base;
        }
        tbody tr:last-child td{
            border-bottom: none;
        }
    }

    th, td
    {
        min-width: 0;
        height: @table-height-base;
        box-sizing:border-box;
        text-align: left;
        text-overflow: ellipsis;
        vertical-align: middle;
        //position: relative;
        border-bottom: 1px solid @border-color-split;
    }


    th {
        height: @table-th-height-base;
        white-space: nowrap;
        word-break:keep-all;           /* 不换行 */
        overflow: hidden;
        background-color: @table-thead-bg;
    }
    td{
        background-color: #fff;
        transition: background-color @transition-time @ease-in-out;
    }

    th&-column,
    td&-column
    {
        &-left{
            text-align: left;
        }
        &-center{
            text-align: center;
        }
        &-right{
            text-align: right;
        }
    }

    & table{
        width: 100%;
        //table-layout: fixed;
    }
    &-tfoot{
        tr:first-child{
            td{
                border-top: 1px solid @border-color-split;
            }
        }


    }
    &-border{
        th,td{
            border-right: 1px solid @border-color-split;
            //min-width: 40px;
        }
    }
    &-cell{
        padding-left: @table-padding-base;
        padding-right: @table-padding-base;
        line-height: 1.4;
        word-break: break-all;
        box-sizing: border-box;
        span{
           line-height: 1;
        }

        &-ellipsis {
            white-space: nowrap;
            word-break: keep-all;
            overflow: visible;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &-tooltip{
            width: 100%;
            &-content{
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        &-with-expand{
            height: 47px;
            line-height: 47px;
            padding: 0;
            text-align: center;
        }

        &-expand{
            cursor: pointer;
            transition: transform @transition-time @ease-in-out;
            i{
                font-size: @font-size-base;
            }
            &-expanded{
                transform: rotate(90deg);
            }
        }
        &-sort{
            cursor: pointer;
            user-select: none;
        }

        // #3159
        &-with-selection{
            .@{checkbox-prefix-cls}-wrapper{
                margin-right: 0;
            }
        }
    }
    &-hidden{
        visibility: hidden;
    }
    th &-cell{
        display:block;
        //position: relative;
        white-space:nowrap;
        vertical-align: middle;

    }


    td&-expanded-cell{
        padding: 20px 50px;
        background: @table-thead-bg;
    }

    &-stripe &-body,
    &-stripe &-fixed-body
    {
        tr:nth-child(2n) {
            td{
                background-color: @table-td-stripe-bg;
            }
        }
        // #1380
        tr.@{table-prefix-cls}-row-hover{
            td{
                background-color: @table-td-hover-bg;
            }
        }
    }

    tr&-row-hover{
        td{
            background-color: @table-td-hover-bg;
        }
    }

    &-large {
        font-size: @font-size-base;
        th{
            height: 48px;
        }
        td{
            height: 60px;
        }
        &-title, &-footer{
            height: 60px;
            line-height: 60px;
        }
        .@{table-prefix-cls}-cell-with-expand{
            height: 59px;
            line-height: 59px;
            i{
                font-size: @font-size-base+2;
            }
        }
    }

    &-small{
        th{
            height: 32px;
        }
        td{
            height: 40px;
        }
        &-title, &-footer{
            height: 40px;
            line-height: 40px;
        }
        .@{table-prefix-cls}-cell-with-expand{
            height: 39px;
            line-height: 39px;
        }
    }

    &-row-highlight,
    tr&-row-highlight&-row-hover,
    &-stripe &-body tr&-row-highlight:nth-child(2n),
    &-stripe &-fixed-body tr&-row-highlight:nth-child(2n)
    {
        td{
            background-color: @table-td-highlight-bg;
        }
    }

    &-row-highlight,
    tr&-row-highlight,
    &-stripe &-body tr&-row-highlight:nth-child(2n),
    &-stripe &-fixed-body tr&-row-highlight:nth-child(2n)
    {
        td{
            color: @table-td-highlight-color;
        }
    }

    &-fixed, &-fixed-right{
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 0px 0 0 0 @border-color-split;
        z-index: 3;
        background-color:#fff ;
        &::before {
            content: '';
            width: 100%;
            //height: 1px;
            //background-color: @border-color-base;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 4;
        }
        tfoot{
            display: table;
            background: #fff;
           // border-top: 1px solid @border-color-split;
            width: 100%;
            tr{
              height: 33px;
            }
            td{
                border: none;
            }
            td.@{table-prefix-cls}-hidden{
                visibility: visible;
                border-bottom: 1px solid @border-color-split;
                div{
                    visibility: hidden;
                }
            }
        }
    }
    &-fixed-right{
        top: 0;
        left: auto;
        right: 0;
        box-shadow: -1px 0 0 0 @border-color-split;
        .@{table-prefix-cls}-hidden:last-child{
            //display: none;
        }
        .@{table-prefix-cls}-fixed-bar{
            position: absolute;
            top:0px;
            background-color:  @table-thead-bg;
            border-right:1px solid  @border-color-base;
            border-bottom:1px solid  @border-color-split;

        }
    }
    &-fixed-right-header{
        position: absolute;
        top: -1px;
        right: 0;
        background-color: @table-thead-bg;
        border-top: 1px solid @border-color-base;
        border-bottom: 1px solid @border-color-split;
    }
    &-fixed-header{
        overflow: hidden;
        &-with-empty{
            .@{table-prefix-cls}-hidden{
                .@{table-prefix-cls}-sort{
                    display: none;
                }
                .@{table-prefix-cls}-cell span{
                    display: none;
                }
            }
        }
        thead {
            display: table;
        }

    }
    &-fixed-body{
        overflow: hidden;
        position: relative;
        z-index: 3;
        tbody{
            display: table;
        }
    }

    &-fixed-shadow {
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        box-shadow: @shadow-right;
        overflow: hidden;
        z-index: 1;
    }

    &-sort{
        .sortable();
    }
    &-filter{
        display: inline-block;
        cursor: pointer;
        position: relative;
        //top: 1px;

        i{
            color: @btn-disable-color;
            transition: color @transition-time @ease-in-out;
            &:hover{
                color: inherit;
            }
            &.on{
                color: @title-color;
            }
        }
        &-list{
            padding: 8px 0 0;
            &-item{
                padding: 0 12px 8px;

                .@{checkbox-wrapper} + .@{checkbox-wrapper}{
                    margin: 0;
                }
                label {
                    display: block;

                    & > span{
                        margin-right: 4px;
                    }
                }
            }
            ul{
                padding-bottom: 8px;
            }
            .select-item(@table-prefix-cls, @table-select-item-prefix-cls);
        }
        &-footer{
            padding: 4px;
            border-top: 1px solid @border-color-split;
            overflow: hidden;
            button:first-child{
                float: left;
            }
            button:last-child{
                float: right;
            }
        }
    }

    &-tip {
        table {
            width: 100%;

            td {
              text-align: center;
            }
        }
    }

    &-expanded-hidden{
        visibility: hidden;
    }
}
.@{table-popper}{
    min-width: 0;
    text-align: left;
    .@{poptip-body}{
        padding: 0;
    }
}
.tbody-ellipsis{
    .@{table-prefix-cls}{
        &-cell{
            padding-left: 8px;
            padding-right: 8px;
            overflow: visible;
            line-height: 1;
            white-space: normal;
            word-break: break-all;
            box-sizing: border-box;
        }
    }
}