
/*! DataTables Bulma integration
 * © SpryMedia Ltd - datatables.net/license
 */

@use 'common.scss' with ($table-header-order-height: 24px);
@use 'ordering.scss';
@use 'processing.scss';
@use 'typography.scss';

// This doesn't yet work with the Bulma's CSS variables. DataTables' CSS variables
// will need an overhaul before they work seamlessly. 
:root {
	--dt-row-selected: 0, 209, 178;
	--dt-row-selected-text: 46, 51, 61;

	&[data-theme="dark"] {
		--dt-row-selected-text: 0, 31, 26;
	}
}

table.dataTable {
	clear: both;
	margin-top: 6px !important;
	margin-bottom: 6px !important;
	max-width: none !important;
	border-spacing: 0;

	// Override default row striping, replacing with an insert box-shadow
	&.table.is-striped > tbody > tr:nth-child(2n) {
		background-color: transparent;
	}

	@include common.row-stripes('.is-striped', '.is-hoverable', 0.019, 0.075, ':nth-child(2n)');
}

@include common.layout-cells;

@media screen and (max-width: 767px) {
	div.dt-container {
		> div.columns:not(.dt-layout-table) {
			> div.column {
				display: block !important;
				text-align: center;
			}
		}
	}
}

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

	> div.columns {
		margin-bottom: 0 !important;
	}

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

		div {
			vertical-align: middle;
		}

		select {
			width: auto;
			display: inline-block;
			vertical-align: middle;
		}
	}

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

		input {
			margin-left: 0.5em;
			width: auto;
			vertical-align: middle;
		}
	}

	div.dt-paging {
		ul {
			justify-content: flex-end;
			list-style: none;
			margin: 0;
		}
	}

	div.dt-processing {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200px;
		margin-left: -100px;
		margin-top: -26px;
		text-align: center;
		padding: 1em 0;
	}
	
	&.dt-empty-footer {
		// Show the boundary on the last row
		tbody > tr:last-child > * {
			border-bottom: 1px solid var(--bulma-border);
		}
	}
}


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

div.dt-container.dt-empty-footer {
	// This is provided by the footer if there is one
	div.dt-scroll-body {
		border-bottom: 1px solid var(--bulma-border);
	}
}

div.dt-scroll-body {
	table {
		border-top: none;
		margin-top: 0 !important;
		margin-bottom: 0 !important;

		thead { // Hide sort icons
			.sorting:before,
			.sorting_asc:before,
			.sorting_desc:before,
			.sorting:after,
			.sorting_asc:after,
			.sorting_desc:after {
				display: none;
			}
		}

		tbody tr:first-child th,
		tbody tr:first-child td {
			border-top: none;
		}

		tbody > tr:last-child > * {
			border-bottom-width: 0 !important;
		}
	}
}

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

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