@charset "utf-8";

@import "./var";


.#{$prefix}table {
    background-color: $table-color-bg;
    overflow: inherit;
    position: relative;
    //font-family: qcloud, Roboto, "San Francisco", "Helvetica Neue", Helvetica, Arial, PingFangSC-Light, "Hiragina Sans GB", "WenQuanYi Micro Hei", 'microsoft yahei ui', "microsoft yahei", sans-serif;
    [class*=tea-] {
        // color: inherit;     // 为了适配不同情况的不同颜色
    }
    border-radius: $border-radius;
}

/* 公共类 */
.#{$prefix}table a {
    display: inline-block;
    vertical-align: middle;
    // color: var(--text-primary-color);
    text-decoration: none;
}
.#{$prefix}table a:hover {
    text-decoration: underline;
}
.#{$prefix}table .#{$prefix}table__icon-wrap {
    font-size: 0;
}
.#{$prefix}table .#{$prefix}form-check .#{$prefix}radio,
.#{$prefix}table .#{$prefix}form-check .#{$prefix}checkbox{top:1px;}

// .#{$prefix}table td .#{$prefix}btn.is-disabled{
//     background-color: transparent;
// }
.#{$prefix}table td .#{$prefix}btn--link{

    margin-right: 8px;
    padding: $table-btn-link-padding;
    &:hover{
        background-color: $table-btn-link-bg-hover;
    }

    &:last-child{
        //margin-right: 0;
    }
}
.#{$prefix}table td .#{$prefix}input,
.#{$prefix}table td .#{$prefix}select{
    max-width: 100%;
}
// 固定列的样式
.#{$prefix}table .#{$prefix}table__td--fixed{
    position: sticky;
    background-color: $table-color-bg;
    z-index: 2;
    transition: none;

}
// 左侧固定列投影
.#{$prefix}table .#{$prefix}table__td--fixed-left::after{
    content:"";
    position: absolute;
    top:0;
    bottom:0;
    right:-25px;
    width:25px;
    box-shadow: inset 10px 0 8px -8px rgba(0,0,0,.2);
}
// 右侧固定列投影
.#{$prefix}table .#{$prefix}table__td--fixed-right::after{
    content:"";
    position: absolute;
    top:0;
    bottom:0;
    left:-25px;
    width:25px;

    box-shadow: inset -10px 0 8px -8px rgba(0,0,0,.2);
}
.#{$prefix}table__box tbody tr.is-selected .#{$prefix}table__td--fixed,
.#{$prefix}table__box tbody tr:hover .#{$prefix}table__td--fixed,
.#{$prefix}table__box tbody tr:focus .#{$prefix}table__td--fixed{
    background-color: $table-color-bg-hover;
}

// *::-ms-backdrop, .#{$prefix}table .#{$prefix}table__td--fixed{
//     position: static;
//     background-color: initial;
//     z-index: initial;

// }
// *::-ms-backdrop, .#{$prefix}table .#{$prefix}table__td--fixed-left::after,
// *::-ms-backdrop, .#{$prefix}table .#{$prefix}table__td--fixed-right::after{
//     display: none;
// }


// 属性使用参考 https://bl.ocks.org/feo52/raw/0677da79114bc24d00cec9c4b018ac4b/

// ie edge
_:-ms-lang(x)::backdrop, .#{$prefix}table .#{$prefix}table__td--fixed-left::after,
_:-ms-lang(x)::backdrop, .#{$prefix}table .#{$prefix}table__td--fixed-right::after{
    display: block;
}
// 仅edge chromium 生效
// _:lang(x)::backdrop, _::-ms-check, .selector { color: blue; }
// *::-ms-backdrop, .#{$prefix}table .#{$prefix}table__td--fixed-left::after,
// *::-ms-backdrop, .#{$prefix}table .#{$prefix}table__td--fixed-right::after{
//     display: none;
// }

// 仅ie11 生效
@media all and (-ms-high-contrast:none) {
    .#{$prefix}table .#{$prefix}table__td--fixed-left::after,
    .#{$prefix}table .#{$prefix}table__td--fixed-right::after{
        display: none;
    }
}


/* 表头 */
.#{$prefix}table thead {
    color: $table-header-color-text;
    font-size: $table-font-size;
    font-weight: $table-header-font-weight;
    /* line-height: 30px; */
    margin-right: 0;
    width: 100%;
    /* background-color: #f6f8fa;
    border-bottom: 1px solid #d1d5de;
    border-top: 1px solid #d1d5de;*/
}
.#{$prefix}table thead tr{
    background-color: $table-header-color-bg;
}
.#{$prefix}table__header{
    background-color: $table-color-bg;
    border-bottom: 1px solid $table-color-border;
    overflow: hidden; //为了兼容横向滚动时，表头隐藏

    > .#{$prefix}table__box{
        margin-bottom: -1px;
    }
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
}
.#{$prefix}table__header thead{
    background-color: transparent;
    border:0 none;
}
.#{$prefix}table__header .#{$prefix}icon{
    margin-top: -2px;
    margin-left: 4px;
}
.#{$prefix}table__header .#{$prefix}icon-sort,
.#{$prefix}table__header .#{$prefix}icon-sortdown,
.#{$prefix}table__header .#{$prefix}icon-sortup,
.#{$prefix}table__header .#{$prefix}icon-filter{
    position: absolute;
    top: 3px;
    margin-left: $table-icon-margin-left;
}

.#{$prefix}table__header .#{$prefix}icon-filter{
    top: 2px;
}

// 筛选
.#{$prefix}table__header .#{$prefix}dropdown-filter{
    height: auto;
}
.#{$prefix}table__header .#{$prefix}dropdown__value{
    height: auto;
    line-height: 1.5;
}
.#{$prefix}table__header .#{$prefix}dropdown{
    max-width: 100%;
}
.#{$prefix}table__header .#{$prefix}dropdown__header .#{$prefix}icon{

}
.#{$prefix}table__headerop{
    max-width: 88%;
}
.#{$prefix}table__sortbtn {
    color: $table-header-color-text;
    cursor:pointer;
    display: block;
    position: relative;
    padding-right:10px;
}
.#{$prefix}table__sortbtn.is-active,
.#{$prefix}table__sortbtn:hover {
    color: $table-color-text-weight;
    .#{$prefix}table__headerop{
        color: $table-color-text-weight;
    }
}
.#{$prefix}table__sortbtn.is-active .#{$prefix}icon-sort,
.#{$prefix}table__sortbtn:hover .#{$prefix}icon-sort{
    background-image: $table-sort-icon-hover-bg-image;
}
.#{$prefix}table__sortbtn.is-active .#{$prefix}icon-sortup,
.#{$prefix}table__sortbtn:hover .#{$prefix}icon-sortup{
    background-image: url(../../assets/image/slice/svg/sort-arrow-up-icon.svg?fill=#{$icon-color-weight})
}
.#{$prefix}table__sortbtn.is-active .#{$prefix}icon-sortdown,
.#{$prefix}table__sortbtn:hover .#{$prefix}icon-sortdown{
    background-image: url(../../assets/image/slice/svg/sort-arrow-down-icon.svg?fill=#{$icon-color-weight})
}

/* tc-15-filtrate-btn */
// .#{$prefix}table__filtratebtn{
//     cursor: pointer;
//     position: relative;
//     padding-right:10px;
//     display: block;
//     box-sizing: border-box;
// }
.#{$prefix}table__filterbtn.is-active .#{$prefix}dropdown__value,
.#{$prefix}table__filterbtn:hover .#{$prefix}dropdown__value{
    color: $table-color-text-weight;
}

.#{$prefix}table__filterbtn.is-active .#{$prefix}icon-filter,
.#{$prefix}table__filterbtn:hover .#{$prefix}icon-filter
{
    background-image: $table-filter-icon-hover-bg-image;
    background-position: inherit;
}

/* .#{$prefix}table thead .resize-line-icon{
    border-right:1px solid #d1d5de;
    position: absolute;
    right: 0;
    height: 20px;
    top: 5px;
    cursor:e-resize;
    padding: 0 5px;
    display: none;
} */
.#{$prefix}table th .tc-15-bubble{
    font-weight: normal;
}



// 拖拽位置
.#{$prefix}table__box td.is-draggable,
.#{$prefix}table__box th.is-draggable{
    position: relative;
    // background-color: $table-color-bg-hover;  // body里用的是is-hover，header里用的是is-draggable
    cursor: move;
    user-select: auto;
    // .#{$prefix}table__drag-area{
    //     width: 100%;
    //     height: 8px;
    //     display: block;
    //     position: absolute;
    //     top:-10px;
    // }
}
.#{$prefix}table__box th.is-dragging,
.#{$prefix}table__box td.is-dragging{
    // border-left: 1px solid $color-primary;
    // border-right: 1px solid $color-primary;
    background-color: $table-color-bg-hover;
}
.#{$prefix}table__target-line{
    position: absolute;
    top:0;
    bottom:0;
    width:3px;
    background-color: $color-border;

    &--vertical{
        background-color: $color-border;
        position: absolute;
        height:3px;
        width:auto;
        left:0;
        right:0;
        top:auto;
        bottom:auto;
        z-index: 1;
        &::before{
            content:"";
            display:block;
            position: absolute;
            left:0;
            top:-4px;
            width:11px;
            height: 11px;
            background-color: $table-color-bg;
            border:3px solid $table-color-border;
            border-radius: 100%;
        }
    }
}
.#{$prefix}table__moving-shadow{
    position: absolute;
    top:0;
    bottom:0;
    background-color: rgba($table-color-bg-hover,0.5);
}
// .#{$prefix}table__box th.is-target,
// .#{$prefix}table__box td.is-target{
//     border-left: 1px solid $color-border;
// }

/*  */
/* .#{$prefix}table__box .text {
	vertical-align: middle;
    display: inline-block;
} */

/* .#{$prefix}table__body i ~ .#{$prefix}text__overflow{
    max-width: 78%;
    vertical-align: -8px;
    margin-left: 5px;
} */
.#{$prefix}table__body .#{$prefix}text__overflow.m-width{
    max-width: 78%;
}

.#{$prefix}table__box {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    position: relative;
}

.#{$prefix}table__body {
    border-bottom: 1px solid $table-color-border;
    overflow: auto;
    // overflow: inherit;
    // overflow-y: auto;
}
.#{$prefix}table__box tr{
    outline:0 none;

    transition: background-color $table-anim-hover-time linear;
    &.is-dragging{
        box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
        td{
            border-bottom: none;
            background-color: $table-color-bg;
        }
    }
}
// 用于前端进行行拖拽时候的动画
.is-dragging .#{$prefix}table__box tr {
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1) 0s;
}
.#{$prefix}table__box th,
.#{$prefix}table__box td {
    text-align: left;
    vertical-align: middle;
    font-size: 0;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: initial
}
.#{$prefix}table__box th {
    position: relative;
    padding:10px;
    border-bottom:1px solid $table-color-border-inner;
}
.#{$prefix}table__box td {
    border-bottom: 1px solid $table-color-border-inner;
    color: $table-color-text;
    padding-top: 14px;
    padding-bottom: 14px;
    height: auto;
    transition: background-color $table-anim-hover-time linear;
    .#{$prefix}table__box thead tr {
        background-color: $table-box-header-tr-color-bg;
    }
}
.#{$prefix}table--compact .#{$prefix}table__box td{
    padding-top:6px;
    padding-bottom:6px;
}
.#{$prefix}table__box th > div,
.#{$prefix}table__box td > div
{
    display:inline-block;
    vertical-align: middle;
    font-size: $table-font-size;
    padding-left: 20px;
    padding-right: 10px;
    width: 100%;
    // line-height: 18px;
    padding: 0;
    word-wrap:break-word;
    word-break:break-word;
}
// 修复ie11下 不换行的问题
// *::-ms-backdrop, .#{$prefix}table__box th > div,.#{$prefix}table__box td > div{
//     word-break: break-all;
// }

.#{$prefix}table__box th > div{
    /* height: 40px; */
    position: relative;
    color: $table-header-color-text;
    /* line-height: 40px; */
    padding: 0;

    [class*=tea-] {
        color: inherit;     // 为了适配不同情况的不同颜色
    }
}

.#{$prefix}table__box tr:last-child td{
    border-bottom: none;
}
.#{$prefix}table__box tr:last-child td td{
    border-bottom:1px solid $table-color-border-inner;
}
.#{$prefix}table__box tr:last-child td tr:last-child td{
    border-bottom: none;
}




.#{$prefix}table__box tbody tr .hover-icon{
    display: none;
}
.#{$prefix}table__box tbody tr:hover .hover-icon{
    display: inline-block;
}
.#{$prefix}table__box tbody tr.new-row{
    background-color:$color-warning-0;
}
.#{$prefix}table__box tbody tr.new-row .new-mark-icon{
    margin-left:3px;
}
.#{$prefix}table__box tbody tr.is-selected,
.#{$prefix}table__box tbody tr:hover,
.#{$prefix}table__box tbody td.is-hover,
.#{$prefix}table__box tbody tr:focus {
    background-color: $table-color-bg-hover;
}
.#{$prefix}table__box tbody tr.no-hover:hover {
    background-color:transparent;
}
.#{$prefix}table__box tbody tr.is-disabled {
    background-color:$table-color-bg;
    opacity: 0.5;
    cursor: not-allowed;
}


.#{$prefix}table__box tr.is-disabled td,
.#{$prefix}table__box tr.is-disabled td a,
.#{$prefix}table__box tr td a.is-disabled
{
    /* color: #bbb; */
    /* cursor: default; */
    cursor: not-allowed;
    text-decoration: none;
}

.#{$prefix}table__box tbody tr:last-child td{
    /* border-bottom: none; */
}


/* .#{$prefix}table__box tbody tr.is-disabled .tc-15-dropdown-link .caret{
    background-image: url(img/slice/svg/page-next.svg);
    background-position: inherit;
} */
.#{$prefix}table .tc-icon-bubble {
    padding-left:0;
    padding-right: 0;
}


/* todo */
.#{$prefix}table__body .#{$prefix}dropdown__body{
    min-width: auto;
}
.#{$prefix}table .#{$prefix}table__body td .op-item{
    min-height: 18px;
    line-height: 18px;
    color: $table-color-text-link;
    display: inline-block;
    vertical-align: middle;
    margin-right:10px;
    &.is-disabled{
        color:$table-color-text-disabled;
        cursor: not-allowed;
    }
}
/* todo */
/* .#{$prefix}table .#{$prefix}table__body td .op-item + .tc-15-dropdown{
    vertical-align: baseline;
} */

/* 空白行 */    // tea-action-state 上线后，以下部分代码可删除
.#{$prefix}table__box .#{$prefix}table__tr--blank{height:98px;}
.#{$prefix}table__box .#{$prefix}table__tr--blank:hover{background-color: $table-color-bg;}
.#{$prefix}table__box .#{$prefix}table__tr--blank td{ text-align:center; vertical-align: middle;}
.#{$prefix}table__box .#{$prefix}table__tr--blank td .#{$prefix}icon{vertical-align: -3px;margin-right: 10px;}
// .#{$prefix}table__box .#{$prefix}table__tr--blank td a{vertical-align:baseline;}

// 新的空白行，不依赖样式 tea-table__tr--blank-new ，高度和居中靠内容自己控制
.#{$prefix}table__box .#{$prefix}table__tr--blank-new{height: auto;}
.#{$prefix}table__box .#{$prefix}table__tr--blank-new:hover{background-color: $table-color-bg;}
.#{$prefix}table__box .#{$prefix}table__tr--blank-new .#{$prefix}action-state{
    display: block;
    text-align: center;
}

/*detail row*/
.#{$prefix}table__body .tr__detailrow>td{
    // background-color:#fafafa;
    background-color:$table-color-bg-gray;
}
.#{$prefix}table__body .tr__masterrow{

}
/* .#{$prefix}table__body .tr__masterrow.is-active .icon-arrow-right,
.#{$prefix}table__body .tc-group-row.is-active .icon-arrow-right{
    background-image: url(../../assets/image/slice/svg/page-next.svg);
} */

.#{$prefix}table__body .tr__detailrow .#{$prefix}table{
    border:1px solid $table-color-border;
    border-radius: $table-border-radius;
    border-bottom: none;
}

.#{$prefix}table__body .tr__detailrow .#{$prefix}table__header tr:hover{
    background-color: $table-color-bg;
}
.#{$prefix}table__body .tc-group-row{
    // 好像没用
    background-color: #f7f7f7;
}
.#{$prefix}table__body .tc-group-row .text-label{
    margin-left: 20px;
}



// loading、加载失败的占位提示
.#{$prefix}info-row {
    padding: 30px 0;
    text-align: center;
    vertical-align: middle;
}

.#{$prefix}table__action-panel{
    margin-bottom: $table-action-panel-margin-bottom;
}

.#{$prefix}table + .#{$prefix}pagination{
    padding: $table-pagination-padding;
}
/****************
    表格类型
****************/
/* 顶部对齐 */
.#{$prefix}table.#{$prefix}table--verticaltop{}
.#{$prefix}table.#{$prefix}table--verticaltop .#{$prefix}table__box td{
    vertical-align: top;
}

// 垂直滚动（手动给tea-table__body定高）
.#{$prefix}table.#{$prefix}table--scrollable .#{$prefix}table__body{overflow: auto;}

// 带边框
.#{$prefix}table.#{$prefix}table--bordered{
    border: 1px solid $table-color-border;
    border-radius: $table-border-radius;
    border-bottom:none;
}

// 带全边框，既单元格也有边框
.#{$prefix}table.#{$prefix}table--allbordered {
    border       : 1px solid $table-all-color-border;
    // border-bottom: none;
    .#{$prefix}table__body{
        border-bottom:none;
        // margin-bottom: -1px;
    }
    th,
    td{
        border-right:1px solid $table-color-border-inner;
    }
    th:last-child,
    tr td:last-child{
        // border-right: none;
    }
    tr:last-child td{
        // border-bottom:1px solid $table-color-border-inner;
    }
}

// 表格宽度根据内容自适应 仅适用与单个table组成的表格
.#{$prefix}table.#{$prefix}table--fixedauto{
    table{
        table-layout: auto;
    }
}

// 响应式表格 只支持
.#{$prefix}table.#{$prefix}table--response{
    tr{
        display: block;
        background-color: $table-color-bg;
        border-bottom:1px solid $table-color-border-inner;
        &:last-child{
            margin-bottom: 0;
            border-bottom:none;
        }
        td{
            display: block;
            width: auto;
            border:none;
            padding-left: 100px;
            position: relative;
            margin: 0 10px;
            &:before{
                content: attr(data-cell-title);
                position: absolute;
                top: 15px;
                left: 20px;
                width: 80px;
                white-space: nowrap;
                font-size: 12px;
                text-align: left;
                color: $table-color-text-label;
            }
        }
    }
    .#{$prefix}table__header{
        display: none;
    }
    .#{$prefix}table__body{
        border-bottom: none;
        colgroup{
            display: none;
        }
    }

    //如果是全边框的
    &.#{$prefix}table--bordered{
        .#{$prefix}table__body{
            border-bottom: 1px solid $table-color-border;
        }
    }
}

// 可 调整列宽
.#{$prefix}table.#{$prefix}table--resizeable{
    th{}
    .#{$prefix}table__header th>div{
        position: relative;
    }
    .#{$prefix}table__resize-line{
        display: block;
        position: absolute;
        top:-10px;
        bottom:-10px;
        right: -16px;
        width:11px;
        z-index: 2;
        cursor: ew-resize;

        &::after{
            position: absolute;
            content:"";
            width:1px;
            top:8px;
            bottom:8px;
            left:5px;
            background-color: $color-border-inner;
        }
    }
    .#{$prefix}table__header th:last-child .#{$prefix}table__resize-line{
        right: -15px;
    }
    &.#{$prefix}table--allbordered .#{$prefix}table__header th:last-child .#{$prefix}table__resize-line{
        right: -16px;
    }
}

.#{$prefix}table__body {
    .#{$prefix}text-overflow.m-width {
        max-width: 78%;
    }
    tr {
        .#{$prefix}icon.is-visibility {
            visibility: hidden;
            //display: none;
        }
        &:hover {
            .#{$prefix}icon.is-visibility {
                visibility: visible;
                //display: inline-block;
                cursor: pointer;
            }
            .#{$prefix}text-with-icon .#{$prefix}icon{
                visibility: visible;
            }
        }
    }
}