//
// Functions / mixins
//
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
     
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
     
    @return $string;
}
 
@function tint( $color, $percent ) {
    @return mix(white, $color, $percent);
}
 
@function shade( $color, $percent ) {
    @return mix(black, $color, $percent);
}
 
@mixin gradient( $from, $to ) {
    background-color: $to;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,     $from 0%, $to 100%); /* Chrome10+,Safari5.1+ */
    background:    -moz-linear-gradient(top,     $from 0%, $to 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(top,     $from 0%, $to 100%); /* IE10+ */
    background:      -o-linear-gradient(top,     $from 0%, $to 100%); /* Opera 11.10+ */
    background:         linear-gradient(to bottom, $from 0%, $to 100%); /* W3C */
}
 
//
// Variables
//
 
// Row background colour (hover, striping etc are all based on this colour and
// calculated automatically)
$table-row-background: transparent !default;
 
// Border between the header (and footer) and the table body
$table-header-border: 1px solid shade($table-row-background, 30%) !default;
$table-header-border-dark: 1px solid rgb(89, 91, 94) !default;
 
// Border of rows / cells
$table-body-border: 1px solid shade($table-row-background, 15%) !default;
$table-body-border-dark: 1px solid rgb(64, 67, 70) !default;
 
// Row colour, when selected (tr.selected) and used for processing display
// These are SCSS lists in `r g b` format
$table-row-selected: 13 110 253 !default;
$table-row-selected-text: 255 255 255 !default;
$table-row-selected-link: 9 10 11 !default;
 
// Text colour of the interaction control elements (info, filter, paging etc)
$table-control-color: inherit !default;
 
// Highlight colour of the paging button for the current page
$table-paging-button-active: rgba(0, 0, 0, 0.05) !default;
$table-paging-button-active-dark: rgba(255, 255, 255, 0.15) !default;
 
// Hover colour of paging buttons on mouse over
$table-paging-button-hover: #111111 !default;
$table-paging-button-hover-dark: rgb(53, 53, 53) !default;
 
// Colour to use when shading
$table-shade: black !default;
 
:root {
    --dt-row-selected: #{str-replace(#{$table-row-selected}, ' ', ', ')};
    --dt-row-selected-text: #{str-replace(#{$table-row-selected-text}, ' ', ', ')};
    --dt-row-selected-link: #{str-replace(#{$table-row-selected-link}, ' ', ', ')};
    --dt-row-stripe: 0, 0, 0;
    --dt-row-hover: 0, 0, 0;
    --dt-column-ordering: 0, 0, 0;
 
    // For blocking elements in extensions (FixedHeader, etc)
    --dt-html-background: white;
 
    &.dark {
        --dt-html-background: rgb(33, 37, 41);
    }
}
 
//
// Mixins
//
@mixin control() {
    display: inline-block;
    color: rgba(0, 0, 0, 0.5);
}
 
@mixin control-open() {
    content: "▶";
}
 
@mixin control-close() {
    content: "▼";
}
 
// Standard row striping with a box shadow
@mixin row-stripes($stripeSel, $hoverSel, $stripeShade: 0.023, $hoverShade: 0.075, $oddEven: '.odd') {
    // Standard rows without striping
    > tbody > tr {
        background-color: $table-row-background;
 
        &.selected > * {
            box-shadow: inset 0 0 0 9999px rgb($table-row-selected);
            box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
            color: rgb($table-row-selected-text);
            color: rgb(var(--dt-row-selected-text));
        }
 
        &.selected a {
            color: rgb($table-row-selected-link);
            color: rgb(var(--dt-row-selected-link));
        }
    }
 
    // With striping
    &#{$stripeSel} > tbody {
        > tr#{$oddEven} > * {
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), $stripeShade);
        }
 
        > tr#{$oddEven}.selected > * {
            box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), $stripeShade + 0.9);
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), $stripeShade + 0.9);
        }
    }
 
    // Hovering
    &#{$hoverSel} > tbody {
        > tr:hover > * {
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), $hoverShade);
        }
 
        > tr.selected:hover > * {
            box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), $hoverShade + 0.9);
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), $hoverShade + 0.9);
        }
    }
}
 
table.dataTable {
    // Child row controls
    td.dt-control {
        text-align: center;
        cursor: pointer;
     
        &:before {
            @include control;
            @include control-open;
        }
    }
     
    tr.dt-hasChild {
        td.dt-control:before {
            @include control-close;
        }
    }
}
 
html.dark {
    table.dataTable {
        td.dt-control {
            &:before {
                color: rgba(255, 255, 255, 0.5);
            }
        }
 
        tr.dt-hasChild {
            td.dt-control:before {
                color: rgba(255, 255, 255, 0.5);
            }
        }
    }
}
 
@import './ordering.scss';
@import './processing.scss';
@import './typography.scss';
 
// jQuery UI stylesheet imports this one - there are just two places where we
// don't want DataTabels default styles assigned for jQuery UI, so rather than
// duplicating the whole file, this is the best option
$jqueryui: false !default;
 
// Chrome 83's default inputs are really ugly, so we need to do this for all
@mixin table-input {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 5px;
    background-color: transparent;
    color: inherit;
}
 
/*
 * Table styles
 */
table.dataTable {
    width: 100%;
    margin: 0 auto;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
 
    /*
     * Header and footer styles
     */
    thead,
    tfoot {
        th {
            font-weight: bold;
        }
    }
 
    > thead > tr > th,
    > thead > tr > td {
        padding: 10px;
 
        @if not $jqueryui { // jQuery UI defines its own border
            border-bottom: $table-header-border;
        }
 
        &:active {
            outline: none;
        }
    }
 
    > tfoot > tr > th,
    > tfoot > tr > td {
        padding: 10px 10px 6px 10px;
 
        @if not $jqueryui { // jQuery UI defines its own border
            border-top: $table-header-border;
        }
    }
 
    /*
     * Body styles
     */
    tbody {
        tr {
            background-color: $table-row-background;
 
            &.selected > * {
                box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.9);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);
                color: rgb($table-row-selected-text);
                color: rgb(var(--dt-row-selected-text));
            }
     
            &.selected a {
                color: rgb($table-row-selected-link);
                color: rgb(var(--dt-row-selected-link));
            }
        }
 
        th,
        td {
            padding: 8px 10px;
        }
    }
 
 
    // Stripe classes - add "row-border" class to the table to activate
    &.row-border > tbody,
    &.display > tbody {
        > tr > th,
        > tr > td {
            border-top: $table-body-border;
        }
 
        > tr:first-child > th,
        > tr:first-child > td {
            border-top: none;
        }
 
        > tr.selected + tr.selected > td {
            border-top-color: darken(rgb($table-row-selected), 5%);
        }
    }
 
 
    // Stripe classes - add "cell-border" class to the table to activate
    &.cell-border > tbody {
        > tr > th,
        > tr > td {
            border-top: $table-body-border;
            border-right: $table-body-border;
        }
 
        > tr > th:first-child,
        > tr > td:first-child {
            border-left: $table-body-border;
        }
 
        > tr:first-child > th,
        > tr:first-child > td {
            border-top: none;
        }
    }
 
 
    // Stripe classes - add "stripe" class to the table to activate
    &.stripe > tbody,
    &.display > tbody {
        > tr.odd > * {
            box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023);
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.023);
        }
 
        > tr.odd.selected > * {
            box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.923);
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.923);
        }
    }
 
 
    // Hover classes - add "hover" class to the table to activate
    &.hover > tbody,
    &.display > tbody {
        > tr:hover > * {
            box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035);
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.035);
        }
 
        > tr.selected:hover > * {
            box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 1) !important;
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important;
        }
    }
 
 
    // Sort column highlighting - add "order-column" class to the table to activate
    &.order-column,
    &.display {
        > tbody {
            tr > .sorting_1,
            tr > .sorting_2,
            tr > .sorting_3 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.019);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.019);
            }
 
            tr.selected > .sorting_1,
            tr.selected > .sorting_2,
            tr.selected > .sorting_3 {
                box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.919);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.919);
            }
        }
    }
 
    &.display > tbody,
    &.order-column.stripe > tbody {
        > tr.odd {
            > .sorting_1 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.054);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.054);
            }
            > .sorting_2 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.047);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.047);
            }
            > .sorting_3 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.039);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.039);
            }
 
            &.selected {
                > .sorting_1 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.954);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.954);
                }
                > .sorting_2 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.947);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.947);
                }
                > .sorting_3 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.939);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.939);
                }
            }
        }
 
        > tr.even {
            > .sorting_1 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.019);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.019);
            }
            > .sorting_2 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.011);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.011);
            }
            > .sorting_3 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.003);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.003);
            }
             
            &.selected {
                > .sorting_1 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.919);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.919);
                }
                > .sorting_2 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.911);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.911);
                }
                > .sorting_3 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.903);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.903);
                }
            }
        }
    }
 
    &.display tbody,
    &.order-column.hover tbody {
        tr:hover {
            > .sorting_1 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.082);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.082);
            }
            > .sorting_2 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.074);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.074);
            }
            > .sorting_3 {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.062);
                box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.062);
            }
 
            &.selected {
                > .sorting_1 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.982);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.982);
                }
                > .sorting_2 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.974);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.974);
                }
                > .sorting_3 {
                    box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), 0.962);
                    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.962);
                }
            }
        }
    }
 
    &.no-footer {
        border-bottom: $table-header-border;
    }
 
    &.compact {
        thead,
        tfoot,
        tbody {
            th,
            td {
                padding: 4px;
            }
        }
    }
}
 
// Its not uncommon to use * {border-box} now, but it messes up the column width
// calculations, so use content-box for the table and cells
table.dataTable th,
table.dataTable td {
    box-sizing: content-box;
}
 
 
/*
 * Control feature layout
 */
.dataTables_wrapper {
    position: relative;
    clear: both;
 
    // Page length options
    .dataTables_length {
        float: left;
 
        select {
            @include table-input;
            padding: 4px;
        }
    }
 
    // Filtering input
    .dataTables_filter {
        float: right;
        text-align: right;
 
        input {
            @include table-input;
            margin-left: 3px;
        }
    }
 
    // Table info
    .dataTables_info {
        clear: both;
        float: left;
        padding-top: 0.755em;
    }
 
    // Paging
    .dataTables_paginate {
        float: right;
        text-align: right;
        padding-top: 0.25em;
 
        .paginate_button {
            box-sizing: border-box;
            display: inline-block;
            min-width: 1.5em;
            padding: 0.5em 1em;
            margin-left: 2px;
            text-align: center;
            text-decoration: none !important;
            cursor: pointer;
 
            color: $table-control-color !important;
            border: 1px solid transparent;
            border-radius: 2px;
            background: transparent;
 
            &.current,
            &.current:hover {
                color: $table-control-color !important;
                border: $table-header-border;
                @include gradient(
                    lighten($table-paging-button-active, 90%),
                    $table-paging-button-active
                );
            }
 
            &.disabled,
            &.disabled:hover,
            &.disabled:active {
                cursor: default;
                color: #666 !important;
                border: 1px solid transparent;
                background: transparent;
                box-shadow: none;
            }
 
            &:hover {
                color: white !important;
                border: 1px solid $table-paging-button-hover;
                @include gradient(
                    lighten($table-paging-button-hover, 28%),
                    $table-paging-button-hover
                );
            }
 
            &:active {
                outline: none;
                @include gradient(
                    lighten($table-paging-button-hover, 10%),
                    darken($table-paging-button-hover, 2%)
                );
                box-shadow: inset 0 0 3px #111;
            }
        }
 
        .ellipsis {
            padding: 0 1em;
        }
    }
 
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_processing,
    .dataTables_paginate {
        color: $table-control-color;
    }
 
    // Scrolling
    .dataTables_scroll {
        clear: both;
 
        div.dataTables_scrollBody {
            -webkit-overflow-scrolling: touch;
 
            > table > thead > tr, > table > tbody > tr {
                > th, > td {
                    // Setting v-align baseline can cause the headers to be visible
                    vertical-align: middle;
                }
 
                > th > div.dataTables_sizing,
                > td > div.dataTables_sizing {
                    // Hide the element used to wrap the content in the header for
                    // the body scrolling table
                    height: 0;
                    overflow: hidden;
                    margin: 0 !important;
                    padding: 0 !important;
                }
            }
        }
    }
 
    &.no-footer {
        .dataTables_scrollBody {
            border-bottom: $table-header-border;
        }
 
        div.dataTables_scrollHead table.dataTable,
        div.dataTables_scrollBody > table {
            border-bottom: none;
        }
    }
 
    // Self clear the wrapper
    &:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }
}
 
 
// Collapse the two column display of the control elements when the screen is
// small - the info and paging control get collapsed first as they are wider,
// and then the length and filter controls
@media screen and (max-width: 767px) {
    .dataTables_wrapper {
        .dataTables_info,
        .dataTables_paginate {
            float: none;
            text-align: center;
        }
 
        .dataTables_paginate {
            margin-top: 0.5em;
        }
    }
}
 
@media screen and (max-width: 640px) {
    .dataTables_wrapper {
        .dataTables_length,
        .dataTables_filter {
            float: none;
            text-align: center;
        }
 
        .dataTables_filter {
            margin-top: 0.5em;
        }
    }
}
 
 
html.dark {
    --dt-row-hover: 255, 255, 255;
    --dt-row-stripe: 255, 255, 255;
    --dt-column-ordering: 255, 255, 255;
 
    table.dataTable {
        > thead > tr > th,
        > thead > tr > td {
            @if not $jqueryui { // jQuery UI defines its own border
                border-bottom: $table-header-border-dark;
            }
     
            &:active {
                outline: none;
            }
        }
     
        > tfoot > tr > th,
        > tfoot > tr > td {
            @if not $jqueryui { // jQuery UI defines its own border
                border-top: $table-header-border-dark;
            }
        }
 
        // Stripe classes - add "row-border" class to the table to activate
        &.row-border > tbody,
        &.display > tbody {
            > tr > th,
            > tr > td {
                border-top: $table-body-border-dark;
            }
 
            > tr.selected + tr.selected > td {
                border-top-color: darken(rgb($table-row-selected), 10%);
            }
        }
     
     
        // Stripe classes - add "cell-border" class to the table to activate
        &.cell-border > tbody {
            > tr > th,
            > tr > td {
                border-top: $table-body-border-dark;
                border-right: $table-body-border-dark;
            }
     
            > tr > th:first-child,
            > tr > td:first-child {
                border-left: $table-body-border-dark;
            }
        }
    }
 
    .dataTables_wrapper {
        // Chrome 83 hack - see top of file
        .dataTables_filter input,
        .dataTables_length select {
            border: 1px solid rgb(255, 255, 255, 0.2);
            background-color: var(--dt-html-background);
        }
 
        .dataTables_paginate {
            .paginate_button {
                &.current,
                &.current:hover {
                    border: $table-header-border-dark;
                    background: $table-paging-button-active-dark;
                }
 
                &.disabled,
                &.disabled:hover,
                &.disabled:active {
                    color: #666 !important;
                }
 
                &:hover {
                    border: 1px solid $table-paging-button-hover-dark;
                    background: $table-paging-button-hover-dark;
                }
 
                &:active {
                    background: lighten($table-paging-button-hover-dark, 2%);
                }
            }
        }
    }
}