

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

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

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

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

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

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

	div.dt-layout-row {
		width: auto;

		div.dt-layout-cell {
			padding-left: 15px;
			padding-right: 15px;
		}
	}

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

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

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

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

	div.dt-info {
		white-space: nowrap;
	}

	div.dt-paging {
		margin: 0;

		ul.pagination {
			margin: 0;
			flex-wrap: wrap;

			li {
				display: inline-block;
			}
		}
	}

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

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

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


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

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

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

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

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

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


// 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;
		}

		div.row {
			margin-bottom: 0;
		}
	
		div.row > * {
			margin-bottom: 0.75rem;
		}
	}
}


//
// 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-condensed > thead > tr {
	th,
	td {
		&.dt-orderable-asc,
		&.dt-orderable-desc,
		&.dt-ordering-asc,
		&.dt-ordering-desc {
			padding-right: 4px;

			span.dt-column-order {
				right: 4px;
			}
		}

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

// 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;
		}
	}
}

