// Row colour, when selected
$table-selected: #B0BED9 !default;

// Colour to use when shading
$table-shade: black !default;

@function shade( $color, $percent ) {
	@return mix($table-shade, $color, $percent);
}


table.dataTable {
	// Body styles
	tbody > tr.selected,
	tbody > tr > .selected {
		background-color: $table-selected;
	}


	// Stripe classes - add "stripe" class to the table to activate
	&.stripe tbody,
	&.display tbody {
		> tr.odd.selected,
		> tr.odd > .selected {
			background-color: shade($table-selected, 2.35%);
		}
	}


	// Hover classes - add "hover" class to the table to activate
	&.hover tbody,
	&.display tbody {
		> tr.selected:hover,
		> tr > .selected:hover {
			background-color: shade($table-selected, 3.6%);
		}
	}


	// Sort column highlighting - add "order-column" class to the table to activate
	&.order-column tbody,
	&.display tbody {
		> tr.selected > .sorting_1,
		> tr.selected > .sorting_2,
		> tr.selected > .sorting_3,
		> tr > .selected {
			background-color: shade($table-selected, 2%);
		}
	}

	&.display tbody,
	&.order-column.stripe tbody {
		> tr.odd.selected {
			>.sorting_1 { background-color: shade($table-selected, 5.4%); }
			>.sorting_2 { background-color: shade($table-selected, 4.7%); }
			>.sorting_3 { background-color: shade($table-selected, 3.9%); }
		}

		> tr.even.selected {
			>.sorting_1 { background-color: shade($table-selected, 2%); }
			>.sorting_2 { background-color: shade($table-selected, 1.2%); }
			>.sorting_3 { background-color: shade($table-selected, 0.4%); }
		}

		> tr.odd > .selected { background-color: shade($table-selected, 5.4%); }
		> tr.even > .selected { background-color: shade($table-selected, 2%); }
	}

	&.display tbody,
	&.order-column.hover tbody {
		> tr.selected:hover {
			>.sorting_1 { background-color: shade($table-selected, 8.2%); }
			>.sorting_2 { background-color: shade($table-selected, 7.5%); }
			>.sorting_3 { background-color: shade($table-selected, 6.3%); }
		}

		> tr:hover > .selected,
		> tr > .selected:hover {
			background-color: shade($table-selected, 8.2%);
		}
	}

	tbody td.select-checkbox,
	tbody th.select-checkbox {
		position: relative;

		&:before,
		&:after {
			display: block;
			position: absolute;
			top: 1.2em; // Should be 50% but IE doesn't like it
			left: 50%;
			width: 12px;
			height: 12px;
			box-sizing: border-box;
		}

		&:before {
			content: ' ';
			margin-top: -6px;
			margin-left: -6px;
			border: 1px solid black;
			border-radius: 3px;
		}
	}

	tr.selected {
		td.select-checkbox,
		th.select-checkbox {
			&:after {
				content: '\2714';

				margin-top: -11px;
				margin-left: -4px;

				text-align: center;
				text-shadow:
					1px 1px #B0BED9,
					-1px -1px #B0BED9,
					1px -1px #B0BED9,
					-1px 1px #B0BED9;
			}
		}
	}
}

div.dataTables_wrapper {
	span.select-info,
	span.select-item {
		margin-left: 0.5em;
	}
}

@media screen and (max-width: 640px) {
	div.dataTables_wrapper {
		span.select-info,
		span.select-item {
			margin-left: 0;
			display: block;
		}
	}
}