@use "sass:meta";
@use 'common.scss';
@use 'ordering.scss';

table.dataTable {
	clear: both;
}


// 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: 75px;
			display: inline-block;
		}
	}

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

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

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

	div.dt-paging {
		margin: 0;
		white-space: nowrap;

		ul.pagination {
			margin: 2px 0;
			white-space: nowrap;
		}
	}

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

@include meta.load-css('typography.scss');
@include meta.load-css('ordering.scss');

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


//
// UIKit 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.uk-table-condensed {
	> thead > tr > th {
		padding-right: 20px;
	}

	.sorting:after,
	.sorting_asc:after,
	.sorting_desc:after {
		top: 6px;
		right: 6px;
	}
}
