@import 'bootstrap-icons/font/bootstrap-icons.css';
@import "datatables.net-bs5/css/dataTables.bootstrap5.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.css";
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline: unset;
    outline-offset: unset;
    color: darken($primary, 10%);
    .dt-column-order {
        color: $primary;
    }
}
table.dataTable > tbody > tr > .selected {
    background-color: unset;
    color: white;
}
table.dataTable {
    &.table-striped > tbody > tr:nth-of-type(2n+1) > * {
        box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.025) !important;
    }

    &.table-striped > tbody > tr:nth-of-type(2n+1):hover > * {
        box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05) !important;
    }

    &.table-striped > tbody > tr:nth-of-type(2n+1).selected > * {
        box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.25) !important;
        color: inherit;
    }

    &.table-striped > tbody > tr.selected > * {
        box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.20) !important;
        color: inherit;
    }

    &.table-hover>tbody>tr.selected:hover>* {
        box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.30) !important;
    }

    tbody > tr.selected > * {
        box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.20) !important;
        color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))) !important;
    }

    td,
    th {
        box-sizing: border-box;
    }

    thead > tr {
        > th.sorting_asc,
        > th.sorting_desc,
        > th.sorting,
        > td.sorting_asc,
        > td.sorting_desc,
        > td.sorting {
            padding-right: 1.25rem;
        }

        > th.sorting:before,
        > th.sorting_asc:before,
        > th.sorting_desc:before,
        > th.sorting_asc_disabled:before,
        > th.sorting_desc_disabled:before,
        > td.sorting:before,
        > td.sorting_asc:before,
        > td.sorting_desc:before,
        > td.sorting_asc_disabled:before,
        > td.sorting_desc_disabled:before {
            display: none;
        }

        > th.sorting:after,
        > th.sorting_asc:after,
        > th.sorting_desc:after,
        > th.sorting_asc_disabled:after,
        > th.sorting_desc_disabled:after,
        > td.sorting:after,
        > td.sorting_asc:after,
        > td.sorting_desc:after,
        > td.sorting_asc_disabled:after,
        > td.sorting_desc_disabled:after {
            right: .375rem;
            margin-top: -0.25rem;
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", sans-serif;
            font-weight: $font-weight-semibold;
            opacity: .4;
        }

        > th.sorting:after {
            color: $gray-400;
            content: "\f0dc";
        }

        > th.sorting_asc:after {
            color: $dark;
            content: "\f0d8";
        }

        > th.sorting_desc:after {
            color: $dark;
            content: "\f0d7";
        }
    }
}

// loading indicator
div.dt-processing > div:last-child > div {
    background: $primary;
}

// buttons
@media screen and (max-width: 767px) {
    div.dt-buttons {
        width: unset;
        margin-bottom: unset;
    }
}

// print view style
body.dt-print-view h1 {
    text-align: center;
    margin: 1em;
    font-size: 1rem;
    font-weight: normal;
}

// info
div.dt-container div.dt-info {
    font-size: $font-size-sm;
}
// pagination
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin-top: .75rem;
    justify-content: center;

    @include media-breakpoint-up(md) {
        margin-top: .125rem;
        justify-content: flex-end;
    }
}

div.dt-container div.dt-paging {
    font-size: $font-size-sm;
    ul.pagination {
        justify-content: end;
        .page-link {
            font-size: $font-size-sm;
            font-weight: normal;
        }
    }
}

.page-item.active .page-link {
    color: $primary-text-emphasis;
    background-color: $primary-lighter;
    border-color: $primary-light;
    box-shadow: none;
}