/* ------------------------------------------------------------------------------
 *
 *  # Datatables library
 *
 *  Add advanced interaction controls to any HTML table
 *
 *  Version: 1.2
 *  Latest update: Mar 10, 2016
 *
 * ---------------------------------------------------------------------------- */


// Base
// ------------------------------

// Table container
.dataTable {
	margin: 0;
	max-width: none;
	border-collapse: separate;

	// Header
	thead {
		th,
		td {
			outline: 0;
			position: relative;
		}

		// Add hand cursor to sortable cells
		.sorting_asc,
		.sorting_desc,
		.sorting {
			cursor: pointer;
		}

		// Add right space to avoid text overlap over arrow
		.sorting,
		.sorting_asc,
		.sorting_desc,
		.sorting_asc_disabled,
		.sorting_desc_disabled {
			padding-right: (@content-padding-large * 2);
		}


		// Add sorting icon base
		.sorting:before,
		.sorting:after,
		.sorting_asc:after,
		.sorting_desc:after,
		.sorting_asc_disabled:after,
		.sorting_desc_disabled:after {
			content: '';
			font-family: 'icomoon';
			position: absolute;
			top: 50%;
			right: @content-padding-large;
			font-size: @font-size-small;
			margin-top: -(@font-size-small / 2);
			display: inline-block;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		// Icons
		.sorting {
			&:before {
				content: '\e9c1';
				margin-top: -2px;
				color: @text-muted;
			}
			&:after {
				content: '\e9c2';
				margin-top: -10px;
				color: @text-muted;
			}
		}
		.sorting_asc:after {
			content: '\e9c2';
		}
		.sorting_desc:after {
			content: '\e9c1';
		}
		.sorting_asc_disabled:after {
			content: '\e9c2';
			color: #ccc;
		}
		.sorting_desc_disabled:after {
			content: '\e9c1';
			color: #ccc;
		}
	}

	// Body
	tbody {

		// Remove top border in first row
		> tr:first-child {
			> th,
			> td {
				border-top: 0;
			}
		}

		// Remove top border from thead by default
	    + thead,
	    + tfoot + thead {
	        > tr:first-child {
	            > th,
	            > td {
	                border-top: 0;
	            }
	        }
	    }
	}

	// Center text in empty table
	.dataTables_empty {
		text-align: center;
	}

	// Collapse borders in bordered table
	&.table-bordered {
		border-collapse: collapse;
	}
}

// Wrapper
.dataTables_wrapper {
	position: relative;
	clear: both;

	// Clearfix
	&:after {
		visibility: hidden;
		display: block;
		content: "";
		clear: both;
		height: 0;
	}

	// Remove top border from bordered table
	.table-bordered {
		border-top: 0;
	}

	// Add top border if panel body comes after wrapper
	+ .panel-body {
		border-top: 1px solid @table-border-color;
	}
}

// Processing indicator
.dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 40px;
	margin-left: -50%;
	margin-top: -25px;
	padding-top: 20px;
	text-align: center;
	background-color: #fff;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
}


// Header and footer
// ------------------------------

// Common
.datatable-header,
.datatable-footer {
	padding: @line-height-computed @content-padding-large 0 @content-padding-large;

	// Clearing floats
	&:after {
		content: ""; 
		display: table; 
		clear: both; 
	}

	// Remove left margin from the first item
	> div:first-child {
		margin-left: 0;
	}

	// Remove horizontal spacing if inside panel body
	.panel-body & {
		padding-left: 0;
		padding-right: 0;
	}
}

// Header
.datatable-header {
	border-bottom: 1px solid @table-border-color;
}

// Footer
.datatable-footer {
	border-top: 1px solid @table-border-highlight;
}


// Controls
// ------------------------------

// Length menu
.dataTables_length {
	float: right;
	display: inline-block;
	margin: 0 0 @line-height-computed @content-padding-large;

	// Text label
	> label {
		margin-bottom: 0;

		// Text, excluding select2 container
		> span:first-child {
			float: left;
			margin: (@padding-base-vertical + 1) @content-padding-large;
			margin-left: 0;
		}
	}

	// Left display option
	.length-left & {
		float: left;
	}

	// Adjust Select2 menu
	.select2-container {
		width: auto;
	}
	.select2-selection {
		min-width: 60px;
	}
}

// Filter
.dataTables_filter {
	position: relative;
	display: block;
	float: left;
	margin: 0 0 @line-height-computed @content-padding-large;

	// Text label
	> label {
		margin-bottom: 0;
		position: relative;

		// Add search icon
		&:after {
			content: "\e98e";
			font-family: 'icomoon';
			font-size: @font-size-small;
			display: inline-block;
			position: absolute;
			top: 50%;
			right: 0;
			margin-top: -(@font-size-small / 2);
			color: @text-muted;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		// Text spacing
		> span {
			float: left;
			margin: (@padding-base-vertical + 1) @content-padding-large;
			margin-left: 0;
		}
	}

	// Filter input
	input {
		outline: 0;
		width: 200px;
		height: @input-height-base;
		padding: @padding-base-vertical 0;
		padding-right: (@font-size-small * 2);
		font-size: @font-size-base;
		line-height: @line-height-base;
		color: @input-color;
		background-color: @input-bg;
		border: 1px solid transparent;
		border-width: 1px 0;
		border-bottom-color: @input-border;

		&:focus {
			border-bottom-color: @input-border-highlight-color;
			.box-shadow(@input-box-shadow);
		}
	}

	// Right display option
	.filter-right & {
		float: right;
	}
}

// Info
.dataTables_info {
	float: left;
	padding: (@padding-base-vertical + 1) 0;
	margin-bottom: @line-height-computed;

	.info-right & {
		float: right;
	}
}

// Pagination common styles
.dataTables_paginate {
	float: right;
	text-align: right;
	margin: 0 0 @line-height-computed @content-padding-large;

	// Button
	.paginate_button {
		display: inline-block;
		padding: (@padding-base-vertical + 1);
		min-width: @input-height-base;
		margin-left: 2px;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		color: @text-color;
		border-radius: @border-radius-base;

		// First item
		&:first-child {
			margin-left: 0;
		}

		// Hover state
		&:hover,
		&:focus {
			background-color: @pagination-hover-bg;
		}

		// Current active state
		&.current {
			&,
			&:hover,
			&:focus {
				color: #fff;
				background-color: @color-slate-700;
			}
		}

		// Disabled state
		&.disabled {
			&,
			&:hover,
			&:focus {
				cursor: default;
				background-color: transparent;
				color: @pagination-disabled-color;
			}
		}
	}

	// Simple paginate
	&.paging_simple .paginate_button {
		padding-left: @padding-base-horizontal;
		padding-right: @padding-base-horizontal;
	}

	// Left display option
	.paginate-left & {
		float: left;
	}
}

// Simple pagination style
.paging_simple {
	.paginate_button {
		&:hover,
		&:focus {
			color: #fff;
			background-color: @color-slate-700;
		}
	}
}


// Scrollable table
// ------------------------------

.dataTables_scroll {
	clear: both;

	// Scrolling header
	.dataTables_scrollHead {
		table {
			border-bottom: 0;
		}

		th,
		td {
			white-space: nowrap;
		}
	}

	// Scrolling body
	.dataTables_scrollBody {
		-webkit-overflow-scrolling: touch;

		table {
			border-bottom: 0;

			thead th[class*=sorting] {
				&:before,
				&:after {
					content: none;
				}
			}

			tbody tr:first-child > td {
				border-top: 0;
			}
		}

		th,
		td {
			white-space: nowrap;

			> .dataTables_sizing {
				height: 0;
				overflow: hidden;
				margin: 0;
				padding: 0;
			}
		}
	}
}


// Table inside panels
// ------------------------------

// Inside panel body
.panel-body {
	+ .dataTables_wrapper,
	+ * > .dataTables_wrapper {
		border-top: 1px solid @panel-default-border;
	}

	.dataTables_wrapper {
		.datatable-footer {
			border-top: 0;

			.dataTables_length,
			.dataTables_filter,
			.dataTables_info,
			.dataTables_paginate {
				margin-bottom: 0;
			}
		}
	}
}

// Inside flat panel
.panel-flat > .panel-heading + .dataTables_wrapper {
	> .datatable-header {
		padding-top: 0;
	}
}

// Bordered table inside panel
.panel > .dataTables_wrapper .table-bordered {
	border: 0;

	> thead,
	> tbody,
	> tfoot {
		> tr {
			> td,
			> th {
				&:first-child {
					border-left: 0;
				}

				&:last-child {
					border-right: 0;
				}
			}
		}
	}

	> tbody > tr:last-child {
		> th,
		> td {
			border-bottom: 0;
		}
	}
}


// Responsive style additions
// ------------------------------

// Simple responsive setup
.datatable-scroll-lg,
.datatable-scroll,
.datatable-scroll-sm {
	min-height: .01%;
}

// Scroller
.datatable-scroll-wrap {
	width: 100%;
	min-height: .01%;
	overflow-x: auto;
}

@media (max-width: @screen-xs-max) {
	.datatable-scroll-sm {
		width: 100%;
		overflow-x: scroll;

		th,
		td {
			white-space: nowrap;
		}
	}
}
@media (max-width: @screen-sm-max) {
	.datatable-scroll {
		width: 100%;
		overflow-x: scroll;

		th,
		td {
			white-space: nowrap;
		}
	}
}
@media (max-width: @screen-md-max) {
	.datatable-scroll-lg {
		width: 100%;
		overflow-x: scroll;

		th,
		td {
			white-space: nowrap;
		}
	}
}

// Common media queries
@media (max-width: @screen-xs-max) {
	.dataTables_info,
	.dataTables_paginate,
	.dataTables_length,
	.dataTables_filter,
	.DTTT_container,
	.ColVis {
		float: none!important;
		text-align: center;
		margin-left: 0;
	}
	.dataTables_info,
	.dataTables_paginate {
		margin-top: 0;
	}

	.datatable-header {
		text-align: center;
	}
}
