
@use "sass:color";
@use 'common.scss';
@use 'ordering.scss';
@use 'processing.scss';
@use 'typography.scss';

:root {
	--dt-row-hover-alpha: 0.035;
	--dt-row-stripe-alpha: 0.023;
	--dt-column-ordering-alpha: 0.019;
	--dt-row-selected-stripe-alpha: 0.923;
	--dt-row-selected-column-ordering-alpha: 0.919;
}

// jQuery UI stylesheet imports this one - there are just two places where we
// don't want DataTables 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;
	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: common.$table-header-border;
		}

		&:active {
			outline: none;
		}
	}

	> tfoot > tr > th,
	> tfoot > tr > td {
		@if not $jqueryui { // jQuery UI defines its own border
			border-top: common.$table-header-border;
		}

		padding: 10px 10px 6px 10px;
	}

	/*
	 * Body styles
	 */
	> tbody {
		> tr {
			background-color: common.$table-row-background;

			&:first-child > * {
				border-top: none;
			}

			&:last-child > * {
				border-bottom: none;
			}

			&.selected > * {
				box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.9);
				box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);
				color: rgb(common.$table-row-selected-text);
				color: rgb(var(--dt-row-selected-text));
			}
	
			&.selected a {
				color: rgb(common.$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 > * {
			border-top: common.$table-body-border;
		}

		> tr:first-child > * {
			border-top: none;
		}

		> tr.selected + tr.selected > td {
			border-top-color: rgba(rgb(common.$table-row-selected), 0.65);
			border-top-color: rgba(var(--dt-row-selected), 0.65);
		}
	}


	// Stripe classes - add "cell-border" class to the table to activate
	&.cell-border > tbody {
		> tr > * {
			border-top: common.$table-body-border;
			border-right: common.$table-body-border;
		}

		> tr > *:first-child {
			border-left: common.$table-body-border;
		}

		> tr:first-child > * {
			border-top: common.$table-header-border;
		}
	}


	// Stripe classes - add "stripe" class to the table to activate
	&.stripe > tbody,
	&.display > tbody {
		> tr:nth-child(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), var(--dt-row-stripe-alpha));
		}

		> tr:nth-child(odd).selected > * {
			box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.923);
			box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-stripe-alpha));
		}
	}



	// 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), var(--dt-row-hover-alpha));
		}

		> tr.selected:hover > * {
			box-shadow: inset 0 0 0 9999px rgba(rgb(common.$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), var(--dt-column-ordering-alpha));
			}

			tr.selected > .sorting_1,
			tr.selected > .sorting_2,
			tr.selected > .sorting_3 {
				box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.919);
				box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-column-ordering-alpha));
			}
		}
	}

	&.display > tbody,
	&.order-column.stripe > tbody {
		> tr:nth-child(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), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha)));
			}
			> .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), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007) );
			}
			> .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), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015));
			}

			&.selected {
				> .sorting_1 {
					box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.954);
					box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)));
				}
				> .sorting_2 {
					box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.947);
					box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007));
				}
				> .sorting_3 {
					box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.939);
					box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015));
				}
			}
		}
	}

	&.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), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha)));
			}
			> .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), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007));
			}
			> .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), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015));
			}

			&.selected {
				> .sorting_1 {
					box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.982);
					box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)));
				}
				> .sorting_2 {
					box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.974);
					box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007));
				}
				> .sorting_3 {
					box-shadow: inset 0 0 0 9999px rgba(rgb(common.$table-row-selected), 0.962);
					box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015));
				}
			}
		}
	}

	&.compact {
		thead,
		tfoot,
		tbody {
			th,
			td {
				padding: 4px;
			}
		}
	}
}


@include common.layout;
@include common.layout-cells;


/*
 * Control feature layout
 */
div.dt-container {
	position: relative;
	clear: both;

	.dt-search {
		input {
			@include table-input;
			margin-left: 3px;
		}
	}

	.dt-input {
		@include table-input;
	}

	select.dt-input {
		// 5px is 1px too much to equal the height of the input elements
		padding: 4px;
	}

	// Paging
	.dt-paging {
		.dt-paging-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: common.$table-control-color !important;
			border: 1px solid transparent;
			border-radius: 2px;
			background: transparent;

			&.current,
			&.current:hover {
				color: common.$table-control-color !important;
				border: common.$table-header-border;
				@include common.gradient(
					color.adjust(common.$table-paging-button-active, $lightness: 90%),
					common.$table-paging-button-active
				);
			}

			&.disabled,
			&.disabled:hover,
			&.disabled:active {
				cursor: default;
				color: rgba(0, 0, 0, 0.5) !important;
				border: 1px solid transparent;
				background: transparent;
				box-shadow: none;
			}

			&:hover {
				color: white !important;
				border: 1px solid common.$table-paging-button-hover;
				@include common.gradient(
					color.adjust(common.$table-paging-button-hover, $lightness: 28%),
					common.$table-paging-button-hover
				);
			}

			&:active {
				outline: none;
				@include common.gradient(
					color.adjust(common.$table-paging-button-hover, $lightness: 10%),
					color.adjust(common.$table-paging-button-hover, $lightness: -2%)
				);
				box-shadow: inset 0 0 3px #111;
			}
		}

		.ellipsis {
			padding: 0 1em;
		}
	}

	.dt-length,
	.dt-search,
	.dt-info,
	.dt-processing,
	.dt-paging {
		color: common.$table-control-color;
	}

	// Scrolling
	.dataTables_scroll {
		clear: both;

		div.dt-scroll-body {
			-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;
				}
			}
		}
	}

	// Tables with an empty footer need special consideration for styling at the end of the table
	&.dt-empty-footer {
		// Show the boundary on the last row
		tbody > tr:last-child > * {
			border-bottom: common.$table-header-border;
		}

		// Except when scrolling, when the border needs to go on the container
		// Table's with a footer have border-top on the footer cells
		.dt-scroll-body {
			border-bottom: common.$table-header-border;

			tbody > tr:last-child > * {
				border-bottom: none;
			}
		}
	}
}


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: common.$table-header-border-dark;
			}
	
			&:active {
				outline: none;
			}
		}
	
		> tfoot > tr > th,
		> tfoot > tr > td {
			@if not $jqueryui { // jQuery UI defines its own border
				border-top: common.$table-header-border-dark;
			}
		}

		// Stripe classes - add "row-border" class to the table to activate
		&.row-border > tbody,
		&.display > tbody {
			> tr > * {
				border-top: common.$table-body-border-dark;
			}

			> tr:first-child > * {
				border-top: none;
			}

			> tr.selected + tr.selected > td {
				border-top-color: rgba(rgb(common.$table-row-selected), 0.65);
				border-top-color: rgba(var(--dt-row-selected), 0.65);
			}
		}
	
	
		// Stripe classes - add "cell-border" class to the table to activate
		&.cell-border > tbody {
			> tr > th,
			> tr > td {
				border-top: common.$table-body-border-dark;
				border-right: common.$table-body-border-dark;
			}
	
			> tr > th:first-child,
			> tr > td:first-child {
				border-left: common.$table-body-border-dark;
			}
		}
	}

	.dt-container {
		&.dt-empty-footer {
			table.dataTable {
				border-bottom: common.$table-header-border-dark;
			}
		}

		// Chrome 83 hack - see top of file
		.dt-search input,
		.dt-length select {
			border: 1px solid rgb(255, 255, 255, 0.2);
			background-color: var(--dt-html-background);
		}

		.dt-paging {
			.dt-paging-button {
				&.current,
				&.current:hover {
					border: common.$table-header-border-dark;
					background: common.$table-paging-button-active-dark;
				}

				&.disabled,
				&.disabled:hover,
				&.disabled:active {
					color: #666 !important;
				}

				&:hover {
					border: 1px solid common.$table-paging-button-hover-dark;
					background: common.$table-paging-button-hover-dark;
				}

				&:active {
					background: color.adjust(common.$table-paging-button-hover-dark, $lightness: 2%);
				}
			}
		}
	}
}

/*
 * Overrides for RTL support
 */
*[dir="rtl"] {
	table.dataTable {
		thead,
		tfoot {
			th,
			td {
				text-align: right;
			}
		}

		th,
		td {
			&.dt-type-numeric,
			&.dt-type-date {
				text-align: left;
			}
		}
	}

	div.dt-container {
		div.dt-layout-cell {
			&.dt-start {
				text-align: right;
			}

			&.dt-end {
				text-align: left;
			}
		}

		div.dt-search input {
			margin: 0 3px 0 0;
		}
	}
}
