.farris-treetable {
    position: relative;
    table {
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
    }
    .farris-treetable-thead {
        table thead th,
        th {
            padding: 0.571em 0.857em;
            border: 1px solid #c8c8c8;
            font-weight: 700;
            color: #333333;
            background-color: #f4f4f4;
            .tt-checkbox {
                margin-right: 0;
                vertical-align: top;
            }
        }
        .resizable-column {
            background-clip: padding-box;
            position: relative;
        }
        .column-resizer {
            display: block;
            position: absolute !important;
            top: 0;
            right: 0;
            margin: 0;
            width: 0.5em;
            height: 100%;
            padding: 0;
            cursor: col-resize;
            border: 1px solid transparent;
        }
    }
    .farris-treetable-tbody {
        tr {
            background: #ffffff;
            color: #333333;
            &:not(.farris-table-selectedrow):hover {
                cursor: pointer;
                background-color: #e7f2ff;
            }
            &.farris-table-selectedrow {
                background-color: #b7d7ff;
            }
        }
        td {
            background: inherit;
            border: 1px solid #c8c8c8;
            padding: 0.429em 0.857em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .tt-checkbox {
                margin-right: 0;
                vertical-align: top;
            }
            .treetable-toggler {
                background-size: 16px;
                background-position: 50% 50%;
                background-repeat: no-repeat;
                padding-right: 6px;
                width: 16px;
                height: 22px;
                display: inline-block;
                vertical-align: top;
                content: " ";
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23979797' d='M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z'/%3E%3C/svg%3E");
            }
            .treenode-icon {
                width: 16px;
                height: 22px;
                display: inline-block;
                background-position: 50% 50%;
                vertical-align: top;
                background-repeat: no-repeat;
            }
            .folder {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8c0-1.11-.9-2-2-2h-8l-2-2z' fill='#90a4ae' /%3E%3C/svg%3E");
            }
            .folder-open {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 20H4c-1.11 0-2-.9-2-2V6c0-1.11.89-2 2-2h6l2 2h7a2 2 0 0 1 2 2H4v10l2.14-8h17.07l-2.28 8.5c-.23.87-1.01 1.5-1.93 1.5z' fill='#90a4ae' /%3E%3C/svg%3E");
            }
            .file {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 9h5.5l-5.5-5.5v5.5m-7-7h8l6 6v12a2 2 0 0 1 -2 2h-12c-1.11 0-2-.9-2-2v-16c0-1.11.89-2 2-2m5 2h-5v16h5 7v-9h-7v-7z' fill='#42a5f5'/%3E%3C/svg%3E");
            }
            .extanded.treetable-toggler {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M11 10H5.344L11 4.414V10z'/%3E%3C/svg%3E");
            }
        }
    }
    .column-resizer-helper {
        width: 1px;
        position: absolute;
        z-index: 10;
        display: none;
        background-color: #6c757d;
        opacity: 0.6;
    }
}

.farris-treetable.fixed {
    border: 1px solid #c8c8c8;
    box-sizing: border-box;
    overflow: hidden;
    .farris-treetable-tbody {
        tr td:first-child {
            border-left: 0;
        }
        tr td:last-child {
            border-right: 0;
        }
        tr:first-child td {
            border-top: 0;
        }
    }
    .farris-treetable-thead {
        th:first-child {
            border-left: 0;
        }
        th:last-child {
            border-right: 0;
        }
        tr:first-child th {
            border-top: 0;
        }
    }
}

// <!-- 固定列样式 -->

.f-treetable--fixed-columns .treetable-header-cell {
    vertical-align: middle;
}

.f-treetable--fixed-columns .ps__rail-x,
.f-treetable--fixed-columns .ps__rail-y {
    z-index: 3;
}

.f-treetable--fixed-left,
.f-treetable--fixed-right {
    position: sticky !important;
    z-index: 2;
    background-color: #ffffff;
    overflow: inherit !important;
}
.treetable-header-cell.f-treetable--fixed-left,
.treetable-header-cell.f-treetable--fixed-right {
    background-color: #f7f8fb;
}

.f-treetable--fixed-columns
    tr
    th.f-treetable--fixed-left[l-tt-shadow-col]::after,
.f-treetable--fixed-columns td.f-treetable--fixed-left::after,
.f-treetable--fixed-right::before {
    pointer-events: none;
    content: "";
    width: 36px !important;
    display: inline-block !important;
    position: absolute !important;
    margin-top: 0 !important;
    top: 0 !important;
    height: 100% !important;
    bottom: -1px !important;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent !important;
}

.f-treetable--fixed-columns
    tr
    th.f-treetable--fixed-left:not([l-tt-shadow-col])::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: calc(-1.125rem / 2);
    display: block;
    height: 1.125rem;
    width: 1px;
    background-color: #e6e9f0;
    box-shadow: none;
}

.f-treetable--fixed-columns
    tr
    th.f-treetable--fixed-left[l-tt-shadow-col]::after,
.f-treetable--fixed-columns tr td.f-treetable--fixed-left::after {
    right: -36px !important;
}

.f-treetable--fixed-columns .f-treetable--fixed-right::before {
    left: -36px !important;
}

.f-treetable--fixed-columns .table-hover tbody tr:hover td {
    background-color: #edf5ff;
}

.f-treetable--fixed-columns
    .farris-treetable-tbody
    tr.farris-table-selectedrow
    td {
    background-color: #dae9ff;
    color: #424347;
}

.f-treetable--fixed-columns
    .farris-treetable-tbody
    tr.f-treetable-disable-row
    td {
    background: #fafafc;
}

.f-treetable--fixed-columns.table-bordered
    tr
    th.f-treetable--fixed-left[l-tt-shadow-col],
.f-treetable--fixed-columns.table-bordered tr th.f-treetable--fixed-right,
.f-treetable--fixed-columns.table-bordered tr td.f-treetable--fixed-left,
.f-treetable--fixed-columns.table-bordered tr td.f-treetable--fixed-right {
    border-right: 0;
    box-shadow: inset -1px 0px 0px #eaecf3;
}

.f-treetable--fixed-columns.table-bordered tr td,
.f-treetable--fixed-columns.table-bordered tr td {
    border-left: 0;
}