
:root {
    --dtfc_background: white;
    --dtfc-thead-cell_background: var(--dtfc_background);
    --dtfc-tbody-cell_background: var(--dtfc_background);
}


:root.dark {
    --dtfc_background: rgb(33, 37, 41);
}

// Make sure the fixed columns aren't transparent
table.dataTable {
    thead,
    tfoot {
        tr > .dtfc-fixed-start,
        tr > .dtfc-fixed-end {
            top: 0;
            bottom: 0;
            z-index: 3;
            background-color: var(--dtfc-thead-cell_background);
        }
    }

    tbody {
        tr > .dtfc-fixed-start,
        tr > .dtfc-fixed-end {
            z-index: 1;
            background-color: var(--dtfc-tbody-cell_background);
        }
    }

    tr > .dtfc-fixed-left::after,
    tr > .dtfc-fixed-right::after {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 10px;
        transition: box-shadow 0.3s;
        content: "";
        pointer-events: none;
    }

    tr > .dtfc-fixed-left::after {
        right: 0;
        transform: translateX(100%);
    }

    tr > .dtfc-fixed-right::after {
        left: 0;
        transform: translateX(-80%);
    }

    &.dtfc-scrolling-left {
        tr > .dtfc-fixed-left::after {
            box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.2);
        }
    }

    &.dtfc-scrolling-right {
        tr > {
            .dtfc-fixed-right::after {
                box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.2);
            }

            // Blockout the stacking
            .dtfc-fixed-right + .dtfc-fixed-right::after {
                box-shadow: none;
            }
        }
    }
}

div.dt-scroll,
div.dtfh-floatingparent {
    position: relative;

    div.dtfc-top-blocker,
    div.dtfc-bottom-blocker {
        position: absolute;
        background-color: var(--dtfc-thead-cell_background);
    }
}

html.dark {
    table.dataTable {
        &.dtfc-scrolling-left {
            tbody > tr > .dtfc-fixed-left::after {
                box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
            }
        }
    
        &.dtfc-scrolling-right {
            tbody > tr > {
                .dtfc-fixed-right::after {
                    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3);
                }
    
                // Blockout the stacking
                .dtfc-fixed-right + .dtfc-fixed-right::after {
                    box-shadow: none;
                }
            }
        }
    }
}
