

@use 'common.scss' with ($table-row-selected: 0 137 182);
@use 'ordering.scss';
@use 'processing.scss';
@use 'typography.scss';

table.dataTable {
	clear: both;
	margin: 0 !important;
	max-width: none !important;
	width: 100%;

	// Override default row striping, replacing with an insert box-shadow
	tr:nth-child(2n) {
		background-color: transparent;
	}

	@include common.row-stripes('', '.hover', 0.054, 0.074, ':nth-child(2n)');
}

@include common.layout-cells;

@media screen and (max-width: 767px) {
	div.dt-container {
		> div.grid-x:not(.dt-layout-table) {
			margin-bottom: 0 !important;

			> div.flex-container {
				display: block !important;
				text-align: center;
				margin: 5px auto;
				width: 100%;
			}
		}
	}
}

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

	div.grid-x {
		margin-bottom: 0.75rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	div.dt-length {
		label {
			display: inline;
			text-align: left;
			margin-bottom: 0;
		}

		select {
			width: 75px;
			margin-bottom: 0;
		}
	}

	div.dt-search {
		label {
			display: inline;
			margin-bottom: 0;
		}
	
		input {
			display: inline-block !important;
			width: auto !important;
			margin-bottom: 0;
			margin-left: 0.5em;
		}
	}

	div.dt-paging {
		ul.pagination {
			margin: 0;
		}
	}

	div.dt-processing {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200px;
		margin-left: -100px;
		margin-top: -26px;
		text-align: center;
		padding: 1rem 0;
	}
}


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

div.dt-scroll-body {
	border-bottom: 1px solid #f1f1f1;

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

		tbody {
			border-bottom-width: 0;
		}

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

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


