@ve-fixed-header-index: 2;
@ve-fixed-header-cell-index: 3;
@ve-fixed-body-cell-index: 1;
@ve-fixed-foot-index: 2;
@ve-fixed-foot-cell-index: 3;
@ve-virtual-phantom-index: -1;

.ve-table *,
.ve-table *:before,
.ve-table *:after {
    box-sizing: border-box;
    // margin: 0;
    // padding: 0;
}

.ve-table {
    position: relative;
    overflow: hidden;

    // table container
    .ve-table-container {
        position: relative;
        overflow-y: auto;
        height: 100%;
        width: 100%;
        // table content
        table.ve-table-content {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            min-width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;

            // 表头（需要处理多表头情况）
            thead.ve-table-header {
                tr.ve-table-header-tr {
                    height: @ve-table-head-row-height;
                    th.ve-table-header-th {
                        background-color: @ve-table-header-background-color;
                        padding: @ve-table-head-row-td-padding;
                        font-weight: 500;
                        color: @ve-table-head-text-color;
                        font-size: @ve-table-head-text-font-size;
                    }
                }
                // 固定头
                &.ve-table-fixed-header {
                    tr th {
                        position: sticky;
                        z-index: @ve-fixed-header-index;
                    }
                }
                .ve-table-header-tr {
                    .ve-table-header-th {
                        // 固定左列、右列
                        &.ve-table-fixed-left,
                        &.ve-table-fixed-right {
                            position: sticky;
                            z-index: @ve-fixed-header-cell-index;
                        }
                        // checkbox
                        .ve-table-checkbox-wrapper {
                            width: 25px;
                        }

                        // sort
                        .ve-table-sort {
                            display: inline-block;
                            position: relative;
                            width: 16px;
                            height: 16px;
                            margin-left: 5px;
                            color: @ve-table-sort-icon-default-color;
                            cursor: pointer;
                            .ve-table-sort-icon {
                                position: absolute;
                                display: block;
                                font-size: 14px;
                                &.ve-table-sort-icon-top {
                                    top: 1px;
                                }

                                &.ve-table-sort-icon-bottom {
                                    top: 9px;
                                }

                                &.active {
                                    color: @ve-table-sort-icon-active-color;
                                }
                            }
                        }

                        /* filter */
                        .ve-table-filter {
                            display: inline-block;
                            position: relative;
                            width: 0;
                            height: 16px;
                            cursor: pointer;
                            .ve-table-filter-icon {
                                position: absolute;
                                top: 0;
                                left: 5px;
                            }
                        }
                    }
                }
            }

            // tbody
            tbody.ve-table-body {
                tr.ve-table-body-tr,
                tr.ve-table-expand-tr {
                    height: @ve-table-body-row-height;
                    td.ve-table-body-td,
                    td.ve-table-expand-td {
                        background-color: @ve-table-body-background-color;
                        color: @ve-table-body-text-color;
                        // hack content fill td height
                        //height: 1px;
                        height: inherit;
                        font-size: @ve-table-body-text-font-size;
                    }

                    td.ve-table-body-td {
                        padding: @ve-table-body-row-td-padding;
                        white-space: pre-wrap;
                        overflow: hidden;
                    }
                }

                tr.ve-table-expand-tr {
                    display: table-row;
                }

                // 斑马纹
                &.ve-table-stripe {
                    tr.ve-table-body-tr:nth-child(2n + 1) td {
                        background-color: @ve-table-body-row-stripe-background-color;
                    }
                }

                // 行悬浮效果
                &.ve-table-row-hover {
                    tr.ve-table-body-tr:hover td {
                        background-color: @ve-table-body-row-hover-background-color;
                    }
                }

                // 行点击高亮
                &.ve-table-row-highlight {
                    tr.ve-table-body-tr {
                        &.ve-table-tr-highlight {
                            td {
                                background-color: @ve-table-body-row-highlight-background-color;
                            }
                        }
                    }
                }
                .ve-table-body-tr {
                    .ve-table-body-td {
                        // 固定左列、右列
                        &.ve-table-fixed-left,
                        &.ve-table-fixed-right {
                            position: sticky;
                            z-index: @ve-fixed-body-cell-index;
                        }

                        // cell selection
                        &.ve-table-cell-selection {
                            border: 1px solid
                                @ve-table-td-selection-border-color;
                        }

                        // expand row icon
                        .ve-table-row-expand-icon {
                            cursor: pointer;
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            i {
                                display: inline-flex;
                                &::before {
                                    transform: rotate(0deg);
                                    transition: transform 0.3s;
                                }
                            }
                            &.ve-table-expand-icon-collapsed {
                                i::before {
                                    transform: rotate(90deg);
                                    transition: transform 0.3s;
                                }
                            }
                        }

                        // checkbox
                        .ve-table-checkbox-wrapper {
                            width: 25px;
                        }

                        // ellipsis
                        .ve-table-body-td-span-ellipsis {
                            overflow: hidden;
                            display: -webkit-box;
                            text-overflow: ellipsis;
                            /* -webkit-line-clamp: 1; */
                            -webkit-box-orient: vertical;
                        }
                    }
                }

                // expand row
                .ve-table-expand-tr {
                    .ve-table-expand-td-content {
                        position: sticky;
                        z-index: @ve-fixed-body-cell-index;
                        left: 0px;
                        padding: @ve-table-body-row-expand-content-padding;
                    }
                }
            }

            //  tfooter
            tfoot.ve-table-footer {
                tr.ve-table-footer-tr {
                    height: @ve-table-foot-row-height;
                    td.ve-table-footer-td {
                        background-color: @ve-table-foot-background-color;
                        color: @ve-table-foot-text-color;
                        padding: @ve-table-foot-row-td-padding;
                        font-size: @ve-table-foot-text-font-size;
                    }
                }
                // 固定footer
                &.ve-table-fixed-footer {
                    tr td {
                        position: sticky;
                        z-index: @ve-fixed-foot-index;
                    }
                }

                .ve-table-footer-tr {
                    .ve-table-footer-td {
                        // 固定左列、右列
                        &.ve-table-fixed-left,
                        &.ve-table-fixed-right {
                            position: sticky;
                            z-index: @ve-fixed-foot-cell-index;
                        }
                    }
                }
            }
        }

        // virtual scroll phantom
        .ve-table-virtual-phantom {
            &.ve-table-virtual-scroll {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                z-index: @ve-virtual-phantom-index;
            }
        }

        // column fix effect
        &.ve-table-container-left-scrolling {
            .ve-table-last-left-fixed-column {
                border-right-color: @ve-table-column-fixed-border-color;
            }
        }
        &.ve-table-container-right-scrolling {
            .ve-table-first-right-fixed-column {
                border-left: 1px solid @ve-table-column-fixed-border-color;
            }
        }

        // is cell editing
        &.ve-table-is-cell-editing {
            .ve-table-content {
                .ve-table-body {
                    .ve-table-body-tr {
                        .ve-table-body-td.ve-table-cell-selection {
                            border-width: 0px;
                        }
                    }
                }
            }
        }

        // border x
        .ve-table-border-x {
            th,
            td {
                border-bottom: 1px solid @ve-table-border-color;
            }

            tr:first-child > th,
            // footer
            tr.ve-table-footer-tr:first-child > td {
                border-top: 1px solid @ve-table-border-color;
            }
        }
        // border y
        .ve-table-border-y {
            th,
            td {
                border-right: 1px solid @ve-table-border-color;
            }

            th:first-child,
            td:first-child {
                border-left: 1px solid @ve-table-border-color;
            }
        }
    }

    // border around
    &.ve-table-border-around {
        border: 1px solid @ve-table-border-color;
        .ve-table-container {
            table.ve-table-content {
                &.ve-table-border-x {
                    tr:last-child > td {
                        border-bottom: 0px;
                    }
                    tr:first-child > th {
                        border-top: 0px;
                    }
                }

                &.ve-table-border-y {
                    th.ve-table-last-column,
                    td:last-child {
                        border-right: 0px;
                    }

                    th:first-child,
                    td:first-child {
                        border-left: 0px;
                    }
                }
            }
        }
    }

    // edit input
    .ve-table-edit-input-container {
        position: absolute;
        right: auto;

        .ve-table-edit-input {
            resize: none;
            overflow-y: visible;
            border: none;
            outline-width: 0;
            margin: 0;
            padding: 1px 5px 0;
            font-family: inherit;
            line-height: @ve-table-td-editing-line-height;
            font-size: inherit;
            border: 2px solid @ve-table-td-editing-border-color;
            box-shadow: 1px 2px 5px 0 #1f232966;
            display: block;
            color: #000;
            border-radius: 0;
            background-color: #fff;
        }
    }
}