

@use 'common.scss' with (
  $table-row-selected: 13 110 253,
  $table-header-order-height: 24px
);
@use 'ordering.scss';
@use 'processing.scss';
@use 'typography.scss';

/*! Bootstrap 5 integration for DataTables
 *
 * ©2020 SpryMedia Ltd, all rights reserved.
 * License: MIT datatables.net/license/mit
 */

table.table.dataTable {
	clear: both;
	margin-bottom: 0;
	max-width: none;
	border-spacing: 0;

	// Override default row striping, replacing with an insert box-shadow
	&.table-striped > tbody > tr:nth-of-type(2n+1) > * {
		box-shadow: none;
	}

	> :not(caption) > * > * {
		background-color: var(--bs-table-bg);
	}

	@include common.row-stripes('.table-striped', '.table-hover', 0.05, 0.075, ':nth-of-type(2n+1)');
}


@include common.layout-cells;

// DataTables' built in feature elements
div.dt-container {
	position: relative;

	div.dt-length {
		label {
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
		}

		select {
			width: auto;
			display: inline-block;
			margin-right: 0.5em;
		}
	}

	div.dt-search {
		text-align: right;

		label {
			font-weight: normal;
			white-space: nowrap;
			text-align: left;
		}

		input {
			margin-left: 0.5em;
			display: inline-block;
			width: auto;
		}
	}

	div.dt-paging {
		margin: 0;

		ul.pagination {
			margin: 2px 0;
			flex-wrap: wrap;
		}
	}

	div.dt-row {
		position: relative;
	}
}


// Scrolling
div.dt-scroll-head table.dataTable {
	margin-bottom: 0 !important;
}

div.dt-scroll-body {
	// Last row of the body can't provide the border, so
	// we need to add it here. Note that this is different
	// from the DataTables CSS approach of using the cells,
	// because DT applies a top border to footer cells. BS
	// does not do that.
	border-bottom-color: var(--bs-border-color);
	border-bottom-width: var(--bs-border-width);
	border-bottom-style: solid;

	> table {
		border-top: none;
		margin-top: 0 !important;
		margin-bottom: 0 !important;

		> tbody > tr:first-child {
			border-top-width: 0;
		}

		> thead > tr {
			border-width: 0 !important;
		}

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

div.dt-scroll-foot {
	> .dt-scroll-footInner {
		box-sizing: content-box;

		> table {
			margin-top: 0 !important;
			border-top: none;

			> tfoot > tr:first-child {
				border-top-width: 0 !important;
			}
		}
	}
}


// Responsive
@media screen and (max-width: 767px) {
	div.dt-container {
		div.dt-length,
		div.dt-search,
		div.dt-info,
		div.dt-paging {
			text-align: center;
		}

		.row {
			--bs-gutter-y: 0.5rem;
		}

		div.dt-paging ul.pagination {
			justify-content: center !important;
		}
	}
}

//
// Bootstrap provides a range of styling options for table's via class name
// that we want to full support. They sometimes require some customisations
//

// Condensed
table.dataTable.table-sm > thead > tr {
	th,
	td {
		&.dt-orderable-asc,
		&.dt-orderable-desc,
		&.dt-ordering-asc,
		&.dt-ordering-desc {
			padding-right: 0.25rem;

			span.dt-column-order {
				right: 0.25rem;
			}
		}

		&.dt-type-date,
		&.dt-type-numeric {
			span.dt-column-order {
				left: 0.25rem;
			}
		}
	}
}

// Bordered table
div.dt-scroll-head table.table-bordered {
	border-bottom-width: 0;
}

// Responsive tables. We use rows inside the Bootstrap responsive wrapper,
// so they need to have their margin and padding removed
div.table-responsive > div.dt-container > div.row {
	margin: 0;

	> div[class^="col-"] {
		&:first-child {
			padding-left: 0;
		}
		&:last-child {
			padding-right: 0;
		}
	}
}

:root[data-bs-theme="dark"] {
	--dt-row-hover: 255, 255, 255;
	--dt-row-stripe: 255, 255, 255;
	--dt-column-ordering: 255, 255, 255;
}
