.x-table {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--x-table-border-color);
    position: relative;
    overflow: hidden;

    /** 搜索 */
    .x-table-search-wrapper {
        // margin-top: -3px;
        background-color: var(--x-table-search-background-color);

        .actions {
            margin: 1px 0;
        }

        &.x-table-search-height--large {
            .el-collapse-item__header {
                height: var(--x-table-search-height-large) !important;
            }
        }

        &.x-table-search-height--default {
            .el-collapse-item__header {
                height: var(--x-table-search-height-default) !important;
            }
        }

        &.x-table-search-height--small {
            .el-collapse-item__header {
                height: var(--x-table-search-height-small) !important;
            }
        }
    }

    /** 工具 */
    .x-table-toolbar-wrapper {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        flex-wrap: wrap;
        align-items: center;
        background-color: var(--x-table-toolbar-background-color);
        padding: 0 3px;
        // overflow: hidden;

        &.x-table-toolbar-height--large {
            min-height: var(--x-table-toolbar-height-large) !important;
        }

        &.x-table-toolbar-height--default {
            min-height: var(--x-table-toolbar-height-default) !important;
        }

        &.x-table-toolbar-height--small {
            min-height: var(--x-table-toolbar-height-small) !important;
        }

        .x-left-toolbar {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            >* {
                margin-right: 4px;
            }
        }

        .x-right-toolbar {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            >* {
                margin-left: 4px;
            }

            .menus-wrapper {
                position: relative;

                .tooltip {
                    position: absolute;
                    top: calc(100% + 5px);
                    right: calc(100% - 35px);
                    z-index: 99;
                    width: 100px;
                    background-color: var(--x-table-toolbar-background-color);
                    box-shadow: 1px 1px 10px #ccc;
                    border-radius: 4px;
                    padding: 4px;
                    display: flex;
                    flex-direction: column;

                    .menu-row {
                        display: flex;
                        cursor: pointer;
                        align-items: center;
                        font-size: var(--x-font-size-small);
                        color: var(--x-font-color);
                    }
                }
            }
        }
    }

    /** 主体 */
    .x-table--render-main {
        width: 100%;
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: var(--x-table-body-background-color);

        .left-fixed-table,
        .right-fixed-table {
            position: absolute;
            z-index: 2;
            border: 0;
            top: 0px;

            .body--render-wrapper {
                overflow: hidden;
                scrollbar-width: none; // 火狐
                -ms-overflow-style: none; // ie
            }
        }

        .left-fixed-table {
            left: 0px;
            box-shadow: 3px 0 4px var(--x-table-fixed-shadow-bgcolor);
        }

        .right-fixed-table {
            right: 0;
            box-shadow: -3px 0 4px var(--x-table-fixed-shadow-bgcolor);
        }

        .x-table--tooltip {
            left: 0;
            top: 0px;
            position: absolute;
            background-color: #000;
            color: #fff;
            padding: 5px;
            border-radius: 3px;
            font-size: 12px;
            opacity: 0.8;
            z-index: 99;

            >.x-tooltip--arrow {
                position: absolute;
                width: 8px;
                height: 8px;
                background-color: #000;
                bottom: -4px;
                left: calc(50% - 4px);
                z-index: -999;
                transform: rotate(-45deg);
            }
        }

        .checkbox-widget {
            display: flex;
            width: 100%;
            justify-content: center;
        }

        .x-table--resizable-bar {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 100%;
            z-index: 108;
            cursor: col-resize;

            &:before {
                content: "";
                display: block;
                height: 100%;
                background-color: var(--x-primary-color);
            }
        }

        .x-cell {
            box-sizing: border-box;
            font-size: var(--x-font-size);
            padding: 0 var(--x-table-cell-padding-right) 0 var(--x-table-cell-padding-left);
        }

        .x-cell-word-break {
            white-space: pre-line;
            word-break: break-all;
        }

        .x-cell-word-nowrap {
            // width 由style限定
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /** 头部 */
        .x-table--header-wrapper {
            width: 100%;
            overflow: hidden;
            scrollbar-width: none; // 火狐
            -ms-overflow-style: none; // ie

            &::-webkit-scrollbar {
                // 谷歌
                height: 0;
                width: 0;
            }

            .x-table--header-large {
                height: var(--x-table-row-height-large) !important;
            }

            .x-table--header-default {
                height: var(--x-table-row-height-default) !important;
            }

            .x-table--header-small {
                height: var(--x-table-row-height-small) !important;
            }

            .x-table--header {
                width: 100%;
                box-sizing: border-box;
                color: var(--x-table-header-font-color);
                background-color: var(--x-table-header-background-color);
                border-top: 1px solid var(--x-table-border-color);
                table-layout: fixed;

                &.x-table--header-bottom-border {
                    border-bottom: 1px solid var(--x-table-border-color);
                }

                &.x-table-none--header {
                    border-top: 0;
                }

                .x-header--gutter {
                    border-bottom: 1px solid var(--x-table-border-color);
                }

                .x-header--gutter {
                    border-bottom: 1px solid var(--x-table-border-color);
                }

                .x-header-cell {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .col--title {
                        white-space: normal;
                        word-break: break-all;
                    }

                    .required {
                        color: var(--x-danger-color);
                    }

                    .edit-icon {
                        margin-right: 3px;
                        margin-bottom: -2px;
                    }

                    .active-sort {
                        color: var(--x-primary-color) !important;
                    }

                    .sort-icon {
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        align-items: center;
                        margin-left: 3px;
                        overflow: hidden;

                        .x-sort--asc-btn {
                            font-size: 0.9em;
                            margin-bottom: -4px;
                            color: var(--x-table-column-icon-border-color);
                            cursor: pointer;

                            &:hover {
                                color: var(--x-table-header-sort-hover);
                            }
                        }

                        .x-sort--desc-btn {
                            font-size: 0.9em;
                            margin-top: -2px;
                            color: var(--x-table-column-icon-border-color);
                            cursor: pointer;

                            &:hover {
                                color: var(--x-table-header-sort-hover);
                            }
                        }
                    }
                }

                .x-header--column:last-of-type {
                    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
                        linear-gradient(var(--x-table-border-color), var(--x-table-border-color));
                }

                .x-header--column {
                    background-image: linear-gradient(var(--x-table-border-color), var(--x-table-border-color)),
                        linear-gradient(var(--x-table-border-color), var(--x-table-border-color));
                    background-repeat: no-repeat;
                    background-size:
                        var(--x-table-border-width) 100%,
                        100% var(--x-table-border-width);
                    background-position:
                        100% 0,
                        100% 100%;
                    user-select: none;
                    position: relative;
                    box-sizing: border-box;

                    .x-resizable {
                        position: absolute;
                        right: -7px;
                        bottom: 0;
                        width: 14px;
                        height: 100%;
                        text-align: center;
                        z-index: 1;
                        cursor: col-resize;
                    }

                    &:last-child {
                        >.x-resizable {
                            right: 0;
                            width: 7px;
                        }
                    }
                }
            }
        }

        /** 表身体 */
        .body--render-wrapper {
            width: 100%;
            overflow-y: auto;

            .is-scrollbar--body {
                tr:last-child .x-body--column {
                    background-image: linear-gradient(var(--x-table-border-color), var(--x-table-border-color)),
                        linear-gradient(var(--x-table-body-background-color), var(--x-table-body-background-color));
                }
            }

            .x-table--body {
                width: 100%;

                .x-body--row {
                    .x-body--column:last-of-type {
                        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
                            linear-gradient(var(--x-table-border-color), var(--x-table-border-color));
                    }

                    .x-body--column {
                        background-image: linear-gradient(var(--x-table-border-color), var(--x-table-border-color)),
                            linear-gradient(var(--x-table-border-color), var(--x-table-border-color));
                        background-repeat: no-repeat;
                        background-size:
                            var(--x-table-border-width) 100%,
                            100% var(--x-table-border-width);
                        background-position:
                            100% 0,
                            100% 100%;
                        position: relative;
                        box-sizing: border-box;
                        color: var(--x-font-color);

                        // .x-body--cell 不能display:flex,否则溢出失效
                        .tree-field-body--cell {
                            display: flex;
                            align-items: center;
                        }

                        .tree-checkbox {
                            margin-right: 3px;

                            .field-value {
                                padding: 0 !important;
                            }
                        }

                        .tree-icon {
                            width: 16px;
                            height: 16px;
                            padding-top: -2px;
                            margin-right: 3px;
                            cursor: pointer;
                            box-sizing: border-box;
                            user-select: none;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #999999;
                            font-size: 16px;
                            float: left;
                        }

                        .ps__rail-x,
                        .ps__rail-y {
                            display: none;
                        }

                        >.cell-error {
                            position: absolute;
                            font-size: 12px;
                            z-index: 90;
                            width: calc(100% - 4px);
                            min-height: 25px;
                            left: 1px;
                            padding: 2px;
                            border-radius: 5px;
                            box-sizing: border-box;
                            background-color: var(--x-table-body-cell-error-background-color);
                            color: var(--x-table-body-cell-error-color);
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: center;
                            word-break: break-all;
                        }

                        >.error-triangle {
                            position: absolute;
                            left: calc(50% - 4px);
                            width: 8px;
                            height: 8px;
                            transform: rotate(45deg);
                            background-color: var(--x-table-body-cell-error-background-color);
                        }

                        >.error-triangle-top {
                            top: -4px;
                        }

                        >.error-triangle-bottom {
                            bottom: -4px;
                        }

                        >.cell-error-top {
                            bottom: 100%;
                        }

                        >.cell-error-bottom {
                            top: 100%;
                        }

                        >.cell-error-lt-triangle::after {
                            content: "";
                            top: -5px;
                            left: -5px;
                            position: absolute;
                            border-width: 5px;
                            border-style: solid;
                            border-color: transparent #f0696d transparent transparent;
                            transform: rotate(45deg);
                        }
                    }
                }

                .x-body-row--stripe {
                    .x-body--row:nth-child(2n) {
                        background-color: var(--x-table-row-striped-background-color);
                    }
                }

                .x-body--active-row {
                    content: "";
                    width: 100%;
                    height: 100%;
                    background-color: var(--x-table-row-active-background-color) !important;
                }

                .x-body--active-tree-row {
                    content: "";
                    width: 100%;
                    height: 100%;
                    background-color: var(--x-table-row-active-tree-background-colorr) !important;
                }

                .x-body--row-large {
                    height: var(--x-table-row-height-large) !important;
                }

                .x-body--row-default {
                    height: var(--x-table-row-height-default) !important;
                }

                .x-body--row-small {
                    height: var(--x-table-row-height-small) !important;
                }

                .x-body-row--hover {
                    .x-body--row:not(.x-body--active-row):hover {
                        background-color: var(--x-table-row-hover-background-color);
                    }
                }
            }
        }

        // 当身体为头部不显示，且工具显示
        .first-row-border-top {
            tbody {
                tr:first-of-type td {
                    border-top: 1px solid var(--x-table-border-color);
                    // background-image: linear-gradient(
                    //     var(--x-table-border-color) 1px,
                    //     transparent 1px,
                    //     transparent calc(100% - 1px),
                    //     transparent calc(100% - 2px)
                    // );
                    // background-size: 100% 100% !important;
                }
            }
        }
    }

    /** 表尾，翻页逻辑 */
    .x-table--footer {
        min-height: var(--x-table-footer-height-small);
        box-sizing: border-box;
        border-top: 1px solid var(--x-table-border-color);

        &.x-table--footer-large {
            min-height: var(--x-table-footer-height-large);
        }

        &.x-table--footer-default {
            min-height: var(--x-table-footer-height-default);
        }

        &.x-table--footer-small {
            min-height: var(--x-table-footer-height-small);
        }
    }
}

.upload--container {
    height: calc(100% - 110px);

    .export-template {
        margin-left: 8px;
        color: #f60;
        cursor: pointer;
    }

    >.input-wrapper {
        box-sizing: border-box;
        padding: 0 4px;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        border-left: 1px solid var(--x-table-border-color);
        border-right: 1px solid var(--x-table-border-color);
    }

    .preview-title {
        border-bottom: 0;
    }

    .preview-table {
        // margin-top: 2px;
    }
}