@use "./fonts";
@use "./colors";
@use "./generic-table-common";

@mixin sticky-left($leftOffset, $zIndex) {
    position: sticky;
    left: $leftOffset;
    z-index: $zIndex !important;
}

@mixin ellipsify() {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@mixin ellipsis() {
    display: inline-block;
    width: 93%;
    @include ellipsify();
}

@mixin common-table($tableStartIndex, $tableEndIndex) {
    thead {
        tr th {
            // box-shadow: none !important;
            box-shadow:
                0px 1px 0px 0px #d4d4d4,
                inset 0px 1px 0px 0px #d4d4d4 !important;
            &:first-of-type {
                box-shadow:
                    0px 0px 0px 0px #d4d4d4,
                    inset 1px 1px 0px 0px #d4d4d4 !important;
            }
            &:last-of-type {
                box-shadow:
                    inset -1px 0 0 0 #d4d4d4,
                    inset 0 1px 0 0 #d4d4d4,
                    inset 0 -1px 0 0 #d4d4d4 !important;
            }
        }

        tr th:nth-child(12) {
            z-index: 101 !important;
        }

        tr th.mat-column-isOrderStarred,
        tr th.mat-column-payForPerformanceColumnIcon {
            background-color: white !important;
        }

        tr.total-row {
            td {
                color: #4a4a4a;

                span {
                    color: #a7a7a7;
                }

                background: white;
                @include fonts.fonts(Roboto, 0.75rem, normal, bold, normal, normal, 0.3px);
            }

            td:nth-of-type(1) {
                @include sticky-left(0px, 501);
            }

            td:nth-of-type(1) {
                box-shadow:
                    inset 1px 0 0 0 rgb(0 0 0 / 75%),
                    inset 0 1px 0 0 rgb(0 0 0 / 75%),
                    inset 0 -1px 0 0 rgb(0 0 0 / 75%);
                @include sticky-left(0, 501);
            }

            td:nth-of-type(n + 2) {
                box-shadow:
                    inset 0 1px 0 0 rgb(0 0 0 / 75%),
                    inset 0 -1px 0 0 rgb(0 0 0 / 75%);
            }

            td:last-of-type {
                box-shadow:
                    inset -1px 0 0 0 rgb(0 0 0 / 75%),
                    inset 0 1px 0 0 rgb(0 0 0 / 75%),
                    inset 0 -1px 0 0 rgb(0 0 0 / 75%);
            }
        }
    }

    tbody {
        tr {
            cursor: pointer;

            td {
                background: white;
                box-shadow: none !important;

                div:nth-child(1) {
                    color: #000;
                    @include ellipsify();
                    @include fonts.fonts(Roboto, 0.75rem, normal, normal, normal, normal, 0px);
                }

                div:nth-child(2) {
                    color: #a7a7a7;
                    @include ellipsify();
                    @include fonts.fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.3px);
                }
            }

            td:nth-of-type(1) {
                @include sticky-left(0px, 102);
            }

            @for $i from calc($tableStartIndex) through calc($tableEndIndex) {
                td:nth-of-type(#{$i}) {
                    box-shadow: inset 0px -1px 0px 0px #d4d4d4 !important;
                }
            }

            td:nth-of-type(#{$tableStartIndex}) {
                box-shadow: inset 1px -1px 0px 0px #d4d4d4 !important;
            }

            td:last-of-type {
                box-shadow: inset -1px -1px 0px 0px #d4d4d4 !important;
            }

            td.mat-cell:first-of-type {
                padding-left: 5px !important;

                i {
                    font-size: 1.25rem;
                    cursor: pointer;
                    position: relative;
                    bottom: 2px;
                }

                i.mdi-star-outline {
                    color: #e6e6e6;
                }

                i.mdi-star {
                    color: #ffc107;
                    opacity: 0.5;
                }

                i.mdi-cog-refresh {
                    color: #8bac2a;
                }
            }
        }

        @include overrideEmptyTrBorders(3);
    }

    &.no-data-table {
        tbody tr:first-of-type {
            td:nth-of-type(#{$tableStartIndex}) {
                box-shadow: inset 1px 0px 0px 0px #d4d4d4 !important;
            }

            td:nth-of-type(#{$tableStartIndex + 1}),
            td:nth-of-type(#{$tableStartIndex + 2}) {
                // box-shadow: none !important;
            }
        }
    }

    &.no-data-table div.horizontal-scroll-for-table-container {
        height: calc(157px) !important;
    }

    .table-container::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .table-container::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .table-container::-webkit-scrollbar-track {
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        margin-top: 105px;
    }
}