.fixed-column-shadow(@position) {
    content: "";
    position: absolute;
    width: 30px;
    height: 100%;
    pointer-events: none;
    background-color: transparent;
    top: 0;
    bottom: -1px;
    transition: box-shadow 0.3s;

    & when (@position = "right") {
        left: 0;
        transform: translate(-100%);
        box-shadow: inset -10px 0 8px -8px #00000026;
    }

    & when (@position = "left") {
        right: 0;
        transform: translate(100%);
        box-shadow: inset 10px 0 8px -8px #00000026;
    }
}

.g-virtual-table {
    position: relative;
    transform: translateX(0);

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(255 255 255 / 70%);
        z-index: 15;
    }

    .scroll-content {
        position: relative;
        overflow: auto;
        scrollbar-width: thin;

        &.scroll-to-left {
            .table-header.fixed,
            .table-cell.fixed {
                &.last.left::after {
                    box-shadow: none !important;
                }
            }
        }

        &.scroll-to-right {
            .table-header.fixed,
            .table-cell.fixed {
                &.last.right::after {
                    box-shadow: none !important;
                }
            }
        }

        .table {
            min-height: 100%;

            .table-headers {
                display: flex;
                flex-wrap: nowrap;
                position: fixed;
                top: 0;
                z-index: 10;
                min-width: 100%;
                overflow-x: hidden;

                .table-header {
                    display: flex;
                    align-items: center;
                    background-color: #f2f2f2;
                    height: 100%;
                    position: relative;

                    &:not(:last-of-type)::before {
                        background-color: rgb(0 0 0 / 6%);
                        content: "";
                        height: 60%;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        transition: background-color 0.3s;
                        width: 1px;
                    }

                    &.fixed {
                        position: sticky;
                        z-index: 5;

                        &.last {
                            &.left {
                                &::after {
                                    .fixed-column-shadow("left");
                                }
                            }

                            &.right {
                                &::after {
                                    .fixed-column-shadow("right");
                                }
                            }
                        }
                    }
                }
            }

            .table-body {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                height: 100%;

                .table-row {
                    width: max-content;
                    position: absolute;
                    top: 0;
                    left: 0;

                    .table-cell {
                        display: inline-flex;
                        align-items: center;
                        background-color: #fff;
                        overflow-wrap: anywhere;
                        vertical-align: bottom;

                        &.fixed {
                            position: sticky;
                            z-index: 5;

                            &.last {
                                &.left {
                                    &::after {
                                        .fixed-column-shadow("left");
                                    }
                                }

                                &.right {
                                    &::after {
                                        .fixed-column-shadow("right");
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}