@use "sass:color";
@use "sass:string";

//
// Functions / mixins
//
@function str-replace($string, $search, $replace: '') {
	$index: string.index($string, $search);
	
	@if $index {
		@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
	}
	
	@return $string;
}

@function tint( $color, $percent ) {
	@return color.mix(white, $color, $percent);
}

@function shade( $color, $percent ) {
	@return color.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 */
}

@function unicode($str) {
  @return string.unquote("\"")+string.unquote(string.insert($str, "\\", 1))+string.unquote("\"")
}

//
// 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: 228 228 228 !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: #111 !default;
$table-paging-button-hover-dark: rgb(53, 53, 53) !default;

// Colour to use when shading
$table-shade: black !default;

$table-header-order-height: 20px !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;
	--dt-header-align-items: center;
	--dt-header-vertical-align: middle;

	// 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;
	box-sizing: border-box;
	content: '';
}

@mixin control-open() {
	border-top: 5px solid transparent;
	border-left: 10px solid rgba(0, 0, 0, 0.5);
	border-bottom: 5px solid transparent;
	border-right: 0px solid transparent;
}

@mixin control-close() {
	border-top: 10px solid rgba(0, 0, 0, 0.5);
	border-left: 5px solid transparent;
	border-bottom: 0px solid transparent;
	border-right: 5px solid transparent;
}

// 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
    tbody {
		td.dt-control {
			text-align: center;
			cursor: pointer;

			&:before {
				@include control;
				@include control-open;
			}
		}

		tr.dt-hasChild {
			td.dt-control:before {
				@include control-close;
			}
		}
	}

	tfoot:empty {
		display: none;
	}
}

html.dark,
:root[data-bs-theme="dark"],
:root[data-theme="dark"] {
	table.dataTable {
		td.dt-control {
			&:before {
				border-left-color: rgba(255, 255, 255, 0.5);
			}
		}

		tr.dt-hasChild {
			td.dt-control:before {
				border-top-color: rgba(255, 255, 255, 0.5);
				border-left-color: transparent;
			}
		}
	}
}

div.dt-scroll {
	width: 100%;
}

div.dt-scroll-body {
	thead,
	tfoot {
		tr {
			height: 0;

			th, td {
				height: 0 !important;
				padding-top: 0px !important;
				padding-bottom: 0px !important;
				border-top-width: 0px !important;
				border-bottom-width: 0px !important;

				div.dt-scroll-sizing {
					height: 0 !important;
					overflow: hidden !important;
				}
			}
		}
	}
}

// 
@mixin layout-cells() {
	div.dt-container {
		div.dt-layout-start {
			> *:not(:last-child) {
				margin-right: 1em;
			}
		}

		div.dt-layout-end {
			> *:not(:first-child) {
				margin-left: 1em;
			}
		}

		div.dt-layout-full {
			width: 100%;

			> *:only-child {
				margin-left: auto;
				margin-right: auto;
			}
		}

		div.dt-layout-table > div {
			display: block !important;
		}
	}

	@media screen and (max-width: 767px) {
		div.dt-container {
			div.dt-layout-start {
				> *:not(:last-child) {
					margin-right: 0;
				}
			}

			div.dt-layout-end {
				> *:not(:first-child) {
					margin-left: 0;
				}
			}
		}
	}
}

@mixin layout() {
	div.dt-container {
		div.dt-layout-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin: 0.75em 0;

			div.dt-layout-cell {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&.dt-layout-start {
					justify-content: flex-start;
					margin-right: auto;
				}

				&.dt-layout-end {
					justify-content: flex-end;
					margin-left: auto;
				}

				&:empty {
					display: none;
				}
			}
		}
	}

	// Collapse the two column display of the control elements when the screen is
	// small
	@media screen and (max-width: 767px) {
		div.dt-container {
			div.dt-layout-row:not(.dt-layout-table) {
				display: block;

				div.dt-layout-cell {
					display: block;
					text-align: center;

					> * {
						margin: 0.5em 0;
					}

					&.dt-layout-start {
						margin-right: 0;
					}

					&.dt-layout-end {
						margin-left: 0;
					}
				}
			}
		}
	}
}
