@import "../../tokens/screen_sizes";

.table-responsive-scroll {
    display: block;
    overflow-x: scroll;

    // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
    // hides outer scroll bar in chrome and safari
    &:not(.table-responsive-scroll .table-responsive-scroll) {
        &::-webkit-scrollbar {
            height: 0px;
        }
    }
    // hides outer scroll bar in firefox
    @supports (scrollbar-width: none) {
        scrollbar-width: none;
        .pb_table {
            overflow-x: auto;
            scrollbar-width: auto;
        }
    }
    // ensures visible inner scroll bar can scroll
    .pb_table {
        overflow-x: auto;
    }

    // Responsive Styles
    @media (max-width: 1600px) {
        &[class*="table-responsive-scroll"] {
            border-radius: 4px;
            box-shadow: 1px 0 0 0px $border_light,
                        -1px 0 0 0px $border_light
        }

        &[class^=pb_table].table-sm.table-card thead tr th:first-child,
        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
            border-left-width: 0px;
        }

        &[class^=pb_table].table-md.table-card thead tr th:first-child,
        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
            border-left-width: 0px;
        }

        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
            border-left-width: 0px;
        }

        &[class^=pb_table].table-sm.table-card thead tr th:last-child,
        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
            border-right-width: 0px;
        }

        &[class^=pb_table].table-md.table-card thead tr th:last-child,
        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
            border-right-width: 0px;
        }

        &[class^=pb_table].table-lg.table-card thead tr th:last-child,
        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
            border-right-width: 0px;
        }
    }
}