/**高亮渐暗 */
@keyframes stk-table-dim {
    from {
        background-color: var(--highlight-color);
    }
}

.stk-table {
    --row-height: 28px;
    --header-row-height: var(--row-height);
    --footer-row-height: var(--row-height);
    --cell-padding-y: 0;
    --cell-padding-x: 8px;
    --resize-handle-width: 4px;
    --border-color: #e8e8f4;
    --border-width: 1px;
    --td-bgc: #fff;
    --td-hover-color: hsl(207, 90%, 70%);
    --td-active-color: hsl(207, 90%, 54%);
    --th-bgc: #f1f1f9;
    --tf-bgc: #f1f1f9;
    --th-color: #272841;
    --tr-active-bgc: rgb(230, 247, 255);
    --tr-hover-bgc: #e6f7ff;
    --bg-border-top: linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-right: linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --highlight-color: #71a2fd;
    --highlight-duration: 2s;
    --highlight-timing-function: linear;
    /* 斑马纹颜色*/
    --stripe-bgc: #fafafc;

    --sort-arrow-color: #757699;
    --sort-arrow-hover-color: #8f90b5;
    --sort-arrow-active-color: #1b63d9;
    --sort-arrow-active-sub-color: #cbcbe1;

    --fold-icon-color: #757699;
    --fold-icon-hover-color: #8f90b5;
    /** 列宽拖动指示器颜色 */
    --col-resize-indicator-color: #87879c;

    /** 固定列阴影颜色 */
    --fixed-col-shadow-color-from: rgba(0, 0, 0, 0.1);
    --fixed-col-shadow-color-to: rgba(0, 0, 0, 0);

    /** 拖动行hover背景 */
    --drag-handle-hover-color: #d0d1e0;

    /** 自定义滚动条颜色 */
    --sb-thumb-color: #c1c1d7;
    --sb-thumb-hover-color: #a8a8c1;

    /** 单元格选区 */
    --cs-bgc: #d3eafd;
    --cs-bc: #2196f3;
    /** 行拖拽选区 */
    --rs-bgc: #e8f3ff;
    --rs-bc: #2a7ee4;


    // contain: layout paint size;
    position: relative;
    overflow: auto;
    will-change: scroll-position;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    outline: none;

    &:hover .stk-sb-thumb {
        opacity: 0.7;
    }

    /**深色模式 */
    &.dark {
        --th-bgc: #202029;
        --tf-bgc: #202029;
        --th-color: #c0c0d1;
        --td-bgc: #1b1b24;
        --td-hover-color: hsl(219, 59%, 60%);
        --td-active-color: hsl(219, 59%, 51%);
        --border-color: #292933;
        --tr-active-bgc: #283f63;
        --tr-hover-bgc: #1a2b46;
        --table-bgc: #1b1b24;
        /* 不能用rgba，因为固定列时，会变成半透明*/
        --highlight-color: #1e4c99;

        --stripe-bgc: #202029;

        --sort-arrow-color: #5d6064;
        --sort-arrow-hover-color: #727782;
        --sort-arrow-active-color: #d0d1d2;
        --sort-arrow-active-sub-color: #5d6064;

        --fold-icon-color: #5d6064;
        --fold-icon-hover-color: #727782;

        --col-resize-indicator-color: #5d6064;

        --fixed-col-shadow-color-from: rgba(135, 135, 156, 0.1);
        --fixed-col-shadow-color-to: rgba(135, 135, 156, 0);

        --drag-handle-hover-color: #5d6064;

        --sb-thumb-color: rgba(93, 96, 100, 0.9);
        --sb-thumb-hover-color: rgb(114, 119, 130);

        --cs-bgc: #2a3f6b;
        --cs-bc: #386ccc;
        --rs-bgc: #223555;
        --rs-bc: #4b8ef0;

        /* background-color: var(--table-bgc); */
        /* ⭐这里加background-color会导致表格出滚动白屏*/
        color: #d1d1e0;

        td[data-cs-s] {
            background-blend-mode: normal;
        }
    }

    &.scrollbar-on {
        overflow: hidden;
        // scrollbar-width: none;
        // &::-webkit-scrollbar{
        //     display: none;
        // }
    }

    /** 移动端禁用自定义滚动条，恢复原生触摸滚动 */
    @media (hover: none) and (pointer: coarse) {
        &.scrollbar-on {
            overflow: auto;
        }

        .stk-sb-thumb {
            display: none !important;
        }
    }

    &.headless {
        &.bordered {
            border-top: 1px solid var(--border-color);
            background-image: var(--bg-border-right), var(--bg-border-bottom);
        }
    }

    /* 调整列宽的话，表格宽度应当自适应 */
    &.col-resizable {
        .stk-table-main {
            width: fit-content;
            min-width: min-content;
            flex: none;
        }
    }

    /** 调整列宽的时候不要触发th事件。否则会导致触发表头点击排序 */
    &.is-col-resizing {
        th {
            pointer-events: none;
        }
    }

    &.bordered {
        /** 
        * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
        * - box-shadow inset 方案不生效，且占用属性。
        * - outline 方案绘制在图形外
        * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
        * - sticky 定位方案需要占用位置。高度为0。
        */
        border-left: var(--border-width) solid var(--border-color);
        /* 下面border用于表格内容不满高度时，绘制表格边界线 */
        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);

        th,
        td {
            background-image: var(--bg-border-right), var(--bg-border-bottom);
        }

        thead tr:first-child th {
            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
        }

        /**
        * 单元格的左边框由左侧相邻单元格的 border-right 提供。
        * 右固定列吸附遮挡内容后，与左侧单元格不再相邻，因此需要自行绘制 border-left。
        */
        th.fixed-cell--border-left,
        td.fixed-cell--border-left {
            background-image: var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
        }

        thead tr:first-child th.fixed-cell--border-left {
            background-image: var(--bg-border-left), var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
        }
    }

    &.bordered-h {
        border-left: none;
        --bg-border-right: linear-gradient(transparent, transparent);
        --bg-border-left: linear-gradient(transparent, transparent);
    }

    &.bordered-v {
        --bg-border-bottom: linear-gradient(transparent, transparent);
        --bg-border-top: linear-gradient(transparent, transparent);
    }

    &.bordered-body-v {
        tbody {
            --bg-border-bottom: linear-gradient(transparent, transparent);
        }
    }

    &.bordered-body-h {
        tbody {
            --bg-border-right: linear-gradient(transparent, transparent);
            --bg-border-left: linear-gradient(transparent, transparent);
        }
    }

    &.stripe {
        &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
            background-color: var(--stripe-bgc);
    }

        &.vt-on .stk-tbody-main tr:nth-child(odd) {
            background-color: var(--stripe-bgc);
        }

        &.area-selection .stk-tbody-main tr[data-rs-s] {
            background-color: var(--rs-bgc);
        }
        
        &.row-hover .stk-tbody-main tr:hover {
            background-color: var(--tr-hover-bgc);
        }

        &.row-active .stk-tbody-main tr.active {
            background-color: var(--tr-active-bgc);
        }
    }

    /** more weight for custom row background*/
    &.row-hover .stk-tbody-main tr:hover {
        background-color: var(--tr-hover-bgc);
    }

    &.row-active .stk-tbody-main tr.active {
        background-color: var(--tr-active-bgc);
    }

    .stk-tbody-main tr[data-rs-s] {
        background-color: var(--rs-bgc);
    }

    .stk-tbody-main tr.row-range-start td {
        box-shadow: inset 0 2px 0 0 var(--rs-bc);
    }

    .stk-tbody-main tr.row-range-end td {
        box-shadow: inset 0 -2px 0 0 var(--rs-bc);
    }

    /* 单元格悬浮 */
    &.cell-hover tbody td:hover {
        box-shadow: inset 0 0 0 2px var(--td-hover-color);
    }

    /* 单元格高亮 */
    &.cell-active tbody td.active {
        box-shadow: inset 0 0 0 2px var(--td-active-color);
    }

    /* 单元格拖选中禁止选中文字 */
    &.is-area-selecting {
        user-select: none;
    }

    &.is-row-drag-selecting {
        user-select: none;
    }

    /* td 溢出*/
    &.text-overflow {
        .table-cell-wrapper {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            outline: none;
        }
    }

    /* th 溢出*/
    &.header-text-overflow {
        .table-header-cell-wrapper {
            white-space: nowrap;
            overflow: hidden;
        }

        .table-header-title {
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    /**虚拟滚动模式 */
    &.virtual {

        /* 为不影响布局，表头行高要定死*/
        .table-header-cell-wrapper {
            overflow: hidden;
            max-height: calc(var(--header-row-height) * var(--row-span, 1));

            .table-header-title {
                max-height: inherit;
            }
        }

        tbody td {
            height: var(--row-height);

            .table-cell-wrapper {
                max-height: var(--row-height);
                overflow: hidden;
            }
        }

        .padding-top-tr td {
            height: 0;
        }

        .expand-cell .table-cell-wrapper {
            white-space: nowrap;
        }

        // .expanded-row .table-cell-wrapper{
        //     overflow: auto;
        // }
    }

    &.auto-row-height {
        tbody td {
            height: unset;

            .table-cell-wrapper {
                max-height: unset;
                overflow: initial;
            }
        }
    }

    &.fixed-relative-mode {
        th {
            position: relative;
        }

        .fixed-cell--active {
            position: relative;
        }
    }

    &.scroll-row-by-row {
        .stk-table-scroll-container {
            position: sticky;
            top: 0;
        }
    }

    &.exp-scroll-y {
        .stk-tbody-main {
            will-change: transform;
        }
    }

    .row-by-row-table-height {
        width: 1px;
        flex-shrink: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    th,
    td {
        font-size: 14px;
        box-sizing: border-box;
        padding: var(--cell-padding-y) var(--cell-padding-x);
        width: var(--cw);
        min-width: var(--cw);
        max-width: var(--cw);
    }

    th {
        color: var(--th-color);
        background-color: inherit;
        /** 
         * 保证向上滚动时，表头不被遮挡。
         * z-index：2 为防止固定列阴影重叠。
         */
        z-index: 2;
        position: sticky;
        top: 0;

        &.sortable {
            cursor: pointer;
        }

        &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
            .arrow-up {
                fill: var(--sort-arrow-hover-color);
            }

            .arrow-down {
                fill: var(--sort-arrow-hover-color);
            }
        }

        &.sorter-desc .table-header-sorter {
            display: inline;

            .arrow-up {
                fill: var(--sort-arrow-active-sub-color);
            }

            .arrow-down {
                fill: var(--sort-arrow-active-color);
            }
        }

        &.sorter-asc .table-header-sorter {
            display: inline;

            .arrow-up {
                fill: var(--sort-arrow-active-color);
            }

            .arrow-down {
                fill: var(--sort-arrow-active-sub-color);
            }
        }
    }

    thead tr {
        background-color: var(--th-bgc);
        height: var(--header-row-height);
    }

    .stk-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        tr {
            background-color: var(--tf-bgc);
            height: var(--footer-row-height);
            td {
                background-color: inherit;
            }
        }
    }

    tbody tr {
        background-color: var(--td-bgc);
        height: var(--row-height);
    }

    .text-l {
        text-align: left;
    }

    .text-c {
        text-align: center;
    }

    .text-r {
        text-align: right;
    }

    .vt-x-left,
    .vt-x-right,
    .vt-x-spacer {
        background-image:none !important;
        padding: 0 !important;
    }

    /** 列宽调整指示器 */
    .column-resize-indicator {
        width: 0;
        height: 100%;
        border-left: 2px solid var(--col-resize-indicator-color);
        position: absolute;
        z-index: 10;
        display: none;
        pointer-events: none;
    }

    .stk-table-main {
        border-spacing: 0;
        border-collapse: separate;
        flex: 1;

        &.fixed-mode {
            table-layout: fixed;
            flex: none;
        }
    }

    .table-cell-wrapper {
        outline: none;
    }

    .fixed-cell {
        background-color: inherit;
    }

    /* 单元格选区 - 使用 inset box-shadow 实现边框，不占用内部空间 */
    /* 通过 data-* 属性（而非 class）应用，避免 Vue 对合并单元格 className 的重新 patch 抹掉选区样式 */
    td[data-cs-s] {
        background-blend-mode: multiply;
        background-color: var(--cs-bgc);
        box-shadow:
            inset 0 var(--cs-t, 0) 0 0 var(--cs-bc),
            inset 0 var(--cs-b, 0) 0 0 var(--cs-bc),
            inset var(--cs-l, 0) 0 0 0 var(--cs-bc),
            inset var(--cs-r, 0) 0 0 0 var(--cs-bc);
    }

    td[data-cs-t] {
        --cs-t: 2px;
    }

    /* 选中的合并单元格在 hover/active 时，选区背景优先于 hover/active 背景 */
    /* 合并单元格的 td 会被动态添加 cell-hover/cell-active class，与 td[data-cs-s] 同详细度， */
    /* 会因源码顺序覆盖选区背景；此处提高详细度确保选区背景不被覆盖 */
    td[data-cs-s].cell-hover,
    td[data-cs-s].cell-active {
        background-color: var(--cs-bgc);
    }

    td[data-cs-b] {
        --cs-b: -2px;
    }

    td[data-cs-l] {
        --cs-l: 2px;
    }

    td[data-cs-r] {
        --cs-r: -2px;
    }

    .highlight-cell {
        animation-name: stk-table-dim;
        animation-duration: var(--highlight-duration);
        animation-timing-function: var(--highlight-timing-function);
        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
    }

    .stk-table-scroll-container {
        display: flex;
    }

    .seq-column {
        text-align: center;
    }

    .drag-row-cell {
        .table-cell-wrapper {
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
        }
    }

    .drag-row-handle {
        cursor: grab;
        border-radius: 4px;

        &:hover {
            background-color: var(--drag-handle-hover-color);
        }

        &:active {
            cursor: grabbing;
        }

        >svg {
            vertical-align: -2px;
        }
    }

    .tr-dragging {
        opacity: 0.5;
    }

    .tr-dragging-over {
        background-color: var(--tr-hover-bgc);
    }

    /*固定列阴影-左*/
    .fixed-cell--left {
        --shadow-rotate: 90deg;

        &.fixed-cell--shadow::after {
            right: -10px;
        }
    }

    /*固定列阴影-右*/
    .fixed-cell--right {
        --shadow-rotate: -90deg;

        &.fixed-cell--shadow::after {
            left: -10px;
        }
    }

    /*固定列阴影*/
    .fixed-cell--shadow::after {
        content: '';
        width: 10px;
        height: 100%;
        top: 0px;
        position: absolute;
        pointer-events: none;
        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
    }

    .fixed-cell--active {
        position: sticky;
    }

    th.fixed-cell--active {
        z-index: 3;
    }

    td.fixed-cell--active {
        z-index: 1;
    }

    tfoot td.fixed-cell--active,
    .stk-footer td.fixed-cell--active {
        z-index: 2;
    }

    .table-header-cell-wrapper {
        max-width: 100%;
        display: inline-flex;
        align-items: center;
    }

    .table-header-title {
        overflow: hidden;
    }

    .table-header-sorter {
        flex-shrink: 0;
        margin-left: 4px;
        width: 16px;
        height: 16px;
        display: none;

        .arrow-up,
        .arrow-down {
            fill: var(--sort-arrow-color);
        }
    }

    .table-header-resizer {
        position: absolute;
        top: 0;
        bottom: 0;
        cursor: col-resize;
        width: var(--resize-handle-width);

        &.left {
            left: 0;
        }

        &.right {
            right: 0;
        }
    }

    /* td inherit tr bgc*/
    .highlight-row {
        animation-name: stk-table-dim;
        animation-duration: var(--highlight-duration);
        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
        animation-timing-function: var(--highlight-timing-function);
    }

    .stk-table-no-data {
        background-color: var(--table-bgc);
        line-height: var(--row-height);
        text-align: center;
        font-size: 14px;
        position: sticky;
        left: 0px;
        border-right: var(--border-width) solid var(--border-color);
        border-bottom: var(--border-width) solid var(--border-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &.no-data-full {
            flex: 1;
        }
    }

    .expanded,
    .tree-expanded {
        .stk-fold-icon::before {
            transform: rotate(90deg);
        }
    }

    .stk-fold-icon {
        display: inline-flex;
        width: 16px;
        height: 16px;
        cursor: pointer;
        align-items: center;

        &::before {
            content: '';
            display: block;
            margin: 0 2px;
            width: 0;
            height: 0;
            border-left: 5px solid var(--fold-icon-color);
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            transition: transform 0.2s ease;
        }

        &:hover::before {
            border-left: 5px solid var(--fold-icon-hover-color);
        }
    }

    td.cell-hover {
        background-color: var(--tr-hover-bgc);
    }

    td.cell-active {
        background-color: var(--tr-active-bgc);
    }

    .stk-sb-thumb {
        z-index: 100;
        position: sticky;
        background-color: var(--sb-thumb-color);
        transition: opacity 0.5s ease;
        user-select: none;
        opacity: 0;
        flex-shrink: 0;
        will-change: transform;

        &:hover {
            background-color: var(--sb-thumb-hover-color);
        }

        &:active {
            opacity: 1;
            background-color: var(--sb-thumb-hover-color);
        }

        &.vertical {
            margin-left: auto;
            top: 0;
            right: 0;
            border-radius: calc(var(--sb-width) / 2);
            width: var(--sb-width);
        }

        &.horizontal {
            margin-top: auto;
            bottom: 0;
            left: 0;
            border-radius: calc(var(--sb-height) / 2);
            height: var(--sb-height);
        }
    }
}