/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-eng.html / wet-boew.github.io/wet-boew/Licence-fra.html
 */

%tables-clear-both {
	clear: both;
}

%tables-outline-none {
	outline: none;
}

%tables-font-weight-400 {
	font-weight: 400;
}

%tables-font-weight-700 {
	font-weight: 700;
}

%tables-border-bottom-1px-111 {
	border-bottom: 1px solid #111;
}

%tables-text-align-right {
	text-align: right;
}

%tables-text-align-center {
	text-align: center;
}

%tables-border-top-1px-solid-ddd {
	border-top: 1px solid #ddd;
}

%tables-border-top-none {
	border-top: 0;
}

%tables-border-right-top-1px-solid-ddd {
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
}

%tables-border-left-1px-solid-ddd {
	border-left: 1px solid #ddd;
}

%tables-color-333 {
	color: #333;
}

%tables-bg-color-a1aec7 {
	background-color: #a1aec7;
}

%tables-bg-color-a2afc8 {
	background-color: #a2afc8;
}

%tables-bg-color-a4b2cb {
	background-color: #a4b2cb;
}

%tables-bg-color-a6b3cd {
	background-color: #a6b3cd;
}

%tables-bg-color-a7b5ce {
	background-color: #a7b5ce;
}

%tables-bg-color-a9b6d0 {
	background-color: #a9b6d0;
}

%tables-bg-color-a9b7d1 {
	background-color: #a9b7d1;
}

%tables-bg-color-abb9d3 {
	background-color: #abb9d3;
}

%tables-bg-color-acbad4 {
	background-color: #acbad4;
}

%tables-bg-color-adbbd6 {
	background-color: #adbbd6;
}

%tables-bg-color-afbdd8 {
	background-color: #afbdd8;
}

%tables-bg-color-e7e7e7 {
	background-color: #e7e7e7;
}

%tables-bg-color-eaeaea {
	background-color: #eaeaea;
}

%tables-bg-color-ebebeb {
	background-color: #ebebeb;
}

%tables-bg-color-eee {
	background-color: #eee;
}

%tables-bg-color-f1f1f1 {
	background-color: #f1f1f1;
}

%tables-bg-color-f3f3f3 {
	background-color: #f3f3f3;
}

%tables-bg-color-whitesmoke {
	background-color: #f5f5f5;
}

%tables-bg-color-f9f9f9 {
	background-color: #f9f9f9;
}

%tables-bg-color-fbfbfb {
	background-color: #fbfbfb;
}

%tables-bg-color-fdfdfd {
	background-color: #fdfdfd;
}

%tables-box-sizing-content-box {
	box-sizing: content-box;
}

%tables-active-sort-option {
	background: #ccc;
	border: 1px solid #111;
}

%tables-inactive-sort-option {
	background: #fff;
	border: 1px solid #aaa;
	color: #757575;
}

%tables-cursor-pointer {
	cursor: pointer;
}

%tables-display-inline-block {
	display: inline-block;
}

/*
 * Table styles
 */
table {
	&.dataTable {
		@extend %tables-box-sizing-content-box;
		@extend %tables-clear-both;
		border-collapse: separate;
		border-spacing: 0;
		margin: 0 auto;
		width: 100% !important;

		thead {
			th {
				@extend %tables-font-weight-700;
				@extend %tables-border-bottom-1px-111;

				&:active {
					@extend %tables-outline-none;
				}
			}

			td {
				@extend %tables-border-bottom-1px-111;

				&:active {
					@extend %tables-outline-none;
				}
			}

			.sorting-cnt {
				white-space: nowrap;

				&:before {
					content: " ";
				}
			}

			.sorting-icons {
				@extend %global-display-none;
				margin-top: 2px;

				&:before {
					@extend %glyphicon-inline-icons;
					content: "\e093";
					padding: 0 .1em 0 0;
				}

				&:after {
					@extend %glyphicon-inline-icons;
					content: "\e094";
					padding: 0 .04em 0 .06em;
				}
			}

			.sorting {
				@extend %tables-cursor-pointer;

				.sorting-icons {
					@extend %tables-display-inline-block;

					&:before,
					&:after {
						@extend %tables-inactive-sort-option;
					}
				}
			}

			.sorting_asc {
				@extend %tables-cursor-pointer;
				@extend %tables-bg-color-e7e7e7;

				.sorting-icons {
					@extend %tables-display-inline-block;

					&:before {
						@extend %tables-active-sort-option;
					}

					&:after {
						@extend %tables-inactive-sort-option;
					}
				}
			}

			.sorting_desc {
				@extend %tables-cursor-pointer;
				@extend %tables-bg-color-e7e7e7;

				.sorting-icons {
					@extend %tables-display-inline-block;

					&:before {
						@extend %tables-inactive-sort-option;
					}

					&:after {
						@extend %tables-active-sort-option;
					}
				}
			}

			.sorting_asc_disabled {
				.sorting-icons {
					@extend %tables-display-inline-block;

					&:before {
						@extend %global-display-none;
					}
				}
			}

			.sorting_desc_disabled {
				.sorting-icons {
					@extend %tables-display-inline-block;

					&:after {
						@extend %global-display-none;
					}
				}
			}
		}

		tfoot {
			th {
				@extend %tables-font-weight-700;
				@extend %tables-border-bottom-1px-111;
			}

			td {
				@extend %tables-border-bottom-1px-111;
			}
		}

		tbody {
			tr {
				background-color: #fff;

				&.selected {
					background-color: #b0bed9;
				}
			}
		}

		th {
			@extend %tables-box-sizing-content-box;

			&.center {
				@extend %tables-text-align-center;
			}

			&.right {
				@extend %tables-text-align-right;
			}
		}

		td {
			@extend %tables-box-sizing-content-box;

			&.center {
				@extend %tables-text-align-center;
			}

			&.right {
				@extend %tables-text-align-right;
			}

			&.dataTables_empty {
				@extend %tables-text-align-center;
			}
		}

		&.rowborder {
			tbody {
				tr {
					&:first-child {
						th,
						td {
							@extend %tables-border-top-none;
						}
					}
				}

				th,
				td {
					@extend %tables-border-top-1px-solid-ddd;
				}
			}
		}

		&.display {
			tbody {
				th,
				td {
					@extend %tables-border-top-1px-solid-ddd;
				}

				tr {
					&:first-child {
						th,
						td {
							@extend %tables-border-top-none;
						}
					}

					&:hover {
						@extend %tables-bg-color-whitesmoke;

						> {
							.sorting_1 {
								@extend %tables-bg-color-eaeaea;
							}

							.sorting_2 {
								@extend %tables-bg-color-ebebeb;
							}

							.sorting_3 {
								@extend %tables-bg-color-eee;
							}
						}

						&.selected {
							@extend %tables-bg-color-a9b7d1;

							> {
								.sorting_1 {
									@extend %tables-bg-color-a1aec7;
								}

								.sorting_2 {
									@extend %tables-bg-color-a2afc8;
								}

								.sorting_3 {
									@extend %tables-bg-color-a4b2cb;
								}
							}
						}
					}

					&.odd {
						@extend %tables-bg-color-f9f9f9;

						&:hover {
							@extend %tables-bg-color-whitesmoke;

							> {
								.sorting_1 {
									@extend %tables-bg-color-eaeaea;
								}

								.sorting_2 {
									@extend %tables-bg-color-ebebeb;
								}

								.sorting_3 {
									@extend %tables-bg-color-eee;
								}
							}

							&.selected {
								@extend %tables-bg-color-a9b7d1;

								> {
									.sorting_1 {
										@extend %tables-bg-color-a1aec7;
									}

									.sorting_2 {
										@extend %tables-bg-color-a2afc8;
									}

									.sorting_3 {
										@extend %tables-bg-color-a4b2cb;
									}
								}
							}
						}

						> {
							.sorting_1 {
								@extend %tables-bg-color-f1f1f1;
							}

							.sorting_2 {
								@extend %tables-bg-color-f3f3f3;
							}

							.sorting_3 {
								@extend %tables-bg-color-whitesmoke;
							}
						}

						&.selected {
							@extend %tables-bg-color-abb9d3;

							> {
								.sorting_1 {
									@extend %tables-bg-color-a6b3cd;
								}

								.sorting_2 {
									@extend %tables-bg-color-a7b5ce;
								}

								.sorting_3 {
									@extend %tables-bg-color-a9b6d0;
								}
							}
						}
					}

					&.even {
						&:hover {
							@extend %tables-bg-color-whitesmoke;

							> {
								.sorting_1 {
									@extend %tables-bg-color-eaeaea;
								}

								.sorting_2 {
									@extend %tables-bg-color-ebebeb;
								}

								.sorting_3 {
									@extend %tables-bg-color-eee;
								}
							}

							&.selected {
								@extend %tables-bg-color-a9b7d1;

								> {
									.sorting_1 {
										@extend %tables-bg-color-a1aec7;
									}

									.sorting_2 {
										@extend %tables-bg-color-a2afc8;
									}

									.sorting_3 {
										@extend %tables-bg-color-a4b2cb;
									}
								}
							}
						}

						> {
							.sorting_1 {
								@extend %tables-bg-color-f9f9f9;
							}

							.sorting_2 {
								@extend %tables-bg-color-fbfbfb;
							}

							.sorting_3 {
								@extend %tables-bg-color-fdfdfd;
							}
						}

						&.selected {
							> {
								.sorting_1 {
									@extend %tables-bg-color-acbad4;
								}

								.sorting_2 {
									@extend %tables-bg-color-adbbd6;
								}

								.sorting_3 {
									@extend %tables-bg-color-afbdd8;
								}
							}
						}
					}

					> {
						.sorting_1 {
							@extend %tables-bg-color-f9f9f9;
						}

						.sorting_2 {
							@extend %tables-bg-color-f9f9f9;
						}

						.sorting_3 {
							@extend %tables-bg-color-f9f9f9;
						}
					}

					&.selected {
						> {
							.sorting_1 {
								@extend %tables-bg-color-acbad4;
							}

							.sorting_2 {
								@extend %tables-bg-color-acbad4;
							}

							.sorting_3 {
								@extend %tables-bg-color-acbad4;
							}
						}
					}
				}
			}
		}

		&.cell-border {
			tbody {
				th,
				td {
					@extend %tables-border-right-top-1px-solid-ddd;
				}

				tr {
					th,
					td {
						&:first-child {
							@extend %tables-border-left-1px-solid-ddd;
						}
					}

					&:first-child {
						th,
						td {
							@extend %tables-border-top-none;
						}
					}
				}
			}
		}

		&.stripe {
			tbody {
				tr {
					&.odd {
						@extend %tables-bg-color-f9f9f9;

						&.selected {
							@extend %tables-bg-color-abb9d3;
						}
					}
				}
			}
		}

		&.hover {
			tbody {
				tr {
					&:hover {
						@extend %tables-bg-color-whitesmoke;

						&.selected {
							@extend %tables-bg-color-a9b7d1;
						}
					}

					&.odd {
						&:hover {
							@extend %tables-bg-color-whitesmoke;

							&.selected {
								@extend %tables-bg-color-a9b7d1;
							}
						}
					}

					&.even {
						&:hover {
							@extend %tables-bg-color-whitesmoke;

							&.selected {
								@extend %tables-bg-color-a9b7d1;
							}
						}
					}
				}
			}
		}

		&.order-column {
			tbody {
				tr {
					> {
						.sorting_1 {
							@extend %tables-bg-color-f9f9f9;
						}

						.sorting_2 {
							@extend %tables-bg-color-f9f9f9;
						}

						.sorting_3 {
							@extend %tables-bg-color-f9f9f9;
						}
					}

					&.selected {
						> {
							.sorting_1 {
								@extend %tables-bg-color-acbad4;
							}

							.sorting_2 {
								@extend %tables-bg-color-acbad4;
							}

							.sorting_3 {
								@extend %tables-bg-color-acbad4;
							}
						}
					}
				}
			}

			&.stripe {
				tbody {
					tr {
						&.odd {
							> {
								.sorting_1 {
									@extend %tables-bg-color-f1f1f1;
								}

								.sorting_2 {
									@extend %tables-bg-color-f3f3f3;
								}

								.sorting_3 {
									@extend %tables-bg-color-whitesmoke;
								}
							}

							&.selected {
								> {
									.sorting_1 {
										@extend %tables-bg-color-a6b3cd;
									}

									.sorting_2 {
										@extend %tables-bg-color-a7b5ce;
									}

									.sorting_3 {
										@extend %tables-bg-color-a9b6d0;
									}
								}
							}
						}

						&.even {
							> {
								.sorting_1 {
									@extend %tables-bg-color-f9f9f9;
								}

								.sorting_2 {
									@extend %tables-bg-color-fbfbfb;
								}

								.sorting_3 {
									@extend %tables-bg-color-fdfdfd;
								}
							}

							&.selected {
								> {
									.sorting_1 {
										@extend %tables-bg-color-acbad4;
									}

									.sorting_2 {
										@extend %tables-bg-color-adbbd6;
									}

									.sorting_3 {
										@extend %tables-bg-color-afbdd8;
									}
								}
							}
						}
					}
				}
			}

			&.hover {
				tbody {
					tr {
						&:hover {
							> {
								.sorting_1 {
									@extend %tables-bg-color-eaeaea;
								}

								.sorting_2 {
									@extend %tables-bg-color-ebebeb;
								}

								.sorting_3 {
									@extend %tables-bg-color-eee;
								}
							}

							&.selected {
								> {
									.sorting_1 {
										@extend %tables-bg-color-a1aec7;
									}

									.sorting_2 {
										@extend %tables-bg-color-a2afc8;
									}

									.sorting_3 {
										@extend %tables-bg-color-a4b2cb;
									}
								}
							}
						}

						&.odd {
							&:hover {
								> {
									.sorting_1 {
										@extend %tables-bg-color-eaeaea;
									}

									.sorting_2 {
										@extend %tables-bg-color-ebebeb;
									}

									.sorting_3 {
										@extend %tables-bg-color-eee;
									}
								}

								&.selected {
									> {
										.sorting_1 {
											@extend %tables-bg-color-a1aec7;
										}

										.sorting_2 {
											@extend %tables-bg-color-a2afc8;
										}

										.sorting_3 {
											@extend %tables-bg-color-a4b2cb;
										}
									}
								}
							}
						}

						&.even {
							&:hover {
								> {
									.sorting_1 {
										@extend %tables-bg-color-eaeaea;
									}

									.sorting_2 {
										@extend %tables-bg-color-ebebeb;
									}

									.sorting_3 {
										@extend %tables-bg-color-eee;
									}
								}

								&.selected {
									> {
										.sorting_1 {
											@extend %tables-bg-color-a1aec7;
										}

										.sorting_2 {
											@extend %tables-bg-color-a2afc8;
										}

										.sorting_3 {
											@extend %tables-bg-color-a4b2cb;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		&.no-footer {
			@extend %tables-border-bottom-1px-111;
		}
	}
}

/*
 * Control feature layout
 */

%tables-paginate-button-current {
	background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
	background-color: #fff;
	border: 1px solid #cacaca;
	color: #333 !important;
}

%tables-paginate-button-disabled {
	background: transparent;
	border: 1px solid transparent;
	box-shadow: none;
	color: #666 !important;
	cursor: default;
}

%tables-scroll-sizing {
	height: 0;
	margin: 0 !important;
	overflow: hidden;
	padding: 0 !important;
}

%tables-pagination-first-button {
	@include border-left-radius($border-radius-base);
	margin-left: 0;
}

%tables-pagination-last-button {
	@include border-right-radius($border-radius-base);
}

.dataTables_wrapper {
	clear: both;
	position: relative;
	zoom: 1;

	.dataTables_filter {
		@extend %tables-color-333;
		@extend %tables-font-weight-400;
		float: left;
		margin-right: 15px;

		input {
			margin-left: .5em;
		}
	}

	.dataTables_length {
		@extend %tables-color-333;
		@extend %tables-font-weight-400;
		display: inline-block;
		margin-top: 5px;
	}

	.dataTables_info {
		@extend %tables-color-333;
		display: inline-block;
	}

	.dataTables_paginate {
		padding-top: 1.25em;
		text-align: center;

		// Duplicating Bootstrap CSS
		.paginate_button {
			background-color: $pagination-bg;
			border: 1px solid $pagination-border;
			color: $pagination-color;
			cursor: pointer;
			display: inline-block;
			line-height: $line-height-base;
			margin-bottom: .5em;
			margin-left: -1px;
			padding: $padding-large-vertical $padding-large-horizontal;
			position: relative;
			text-decoration: none;

			&.previous {
				@extend %tables-pagination-first-button;

				&:before {
					@extend %pagination-left-arrow;
				}
			}

			&.next {
				@extend %tables-pagination-last-button;

				&:after {
					@extend %pagination-right-arrow;
				}
			}

			&.current {
				background-color: $pagination-active-bg;
				border-color: $pagination-active-border;
				color: $pagination-active-color;
				cursor: default;
				z-index: 2;

				&:first-child {
					@extend %tables-pagination-first-button;
				}

				&:last-child {
					@extend %tables-pagination-last-button;
				}
			}

			&.disabled {
				@extend %global-display-none;
			}

			&:hover,
			&:focus,
			&:active {
				background-color: $pagination-hover-bg;
				border-color: $pagination-hover-border;
				color: $pagination-hover-color;
			}
		}
	}

	.dataTables_processing {
		@extend %tables-color-333;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 25%, rgba(255, 255, 255, .9) 75%, rgba(255, 255, 255, 0) 100%);
		background-color: #fff;
		font-size: 1.2em;
		height: 40px;
		left: 50%;
		margin-left: -50%;
		margin-top: -25px;
		padding-top: 20px;
		position: absolute;
		text-align: center;
		top: 50%;
		width: 100%;
	}

	.dataTables_scroll {
		@extend %tables-clear-both;

		div {
			&.dataTables_scrollBody {
				-webkit-overflow-scrolling: touch;

				th,
				td {
					> {
						div {
							&.dataTables_sizing {
								@extend %tables-scroll-sizing;
							}
						}
					}
				}
			}
		}
	}

	&.no-footer {
		.dataTables_scrollBody {
			@extend %tables-border-bottom-1px-111;
		}

		div {
			&.dataTables_scrollHead,
			&.dataTables_scrollBody {
				table {
					border-bottom: 0;
				}
			}
		}
	}

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

%tables-sorting-text-align-right {
	text-align: right;
}

%tables-sorting-margin-left-0-margin-right-5 {
	margin-left: 0;
	margin-right: 5px;
}

%tables-pagination-first-button-rtl {
	@include border-left-radius(0);
	@include border-right-radius($border-radius-base);
}

%tables-pagination-last-button-rtl {
	@include border-left-radius($border-radius-base);
	@include border-right-radius(0);
}

[dir=rtl] {
	table {
		&.dataTable {
			thead {
				.sorting,
				.sorting_asc,
				.sorting_desc,
				.sorting_asc_disabled,
				.sorting_desc_disabled {
					@extend %tables-sorting-text-align-right;

					&:after {
						@extend %tables-sorting-margin-left-0-margin-right-5;
					}
				}
			}
		}
	}

	.dataTables_wrapper {
		.dataTables_info,
		.dataTables_length {
			float: right;
		}

		.dataTables_filter {
			float: left;
			text-align: left;

			input {
				margin-left: auto;
				margin-right: .5em;
			}
		}

		.dataTables_paginate {
			.paginate_button {
				&.previous {
					@extend %tables-pagination-first-button-rtl;

					&:after {
						@extend %pagination-right-arrow;
					}

					&:before {
						@extend %global-display-none;
					}
				}

				&.next {
					@extend %tables-pagination-last-button-rtl;

					&:after {
						@extend %global-display-none;
					}

					&:before {
						@extend %pagination-left-arrow;
					}
				}

				&.current {
					&:first-child {
						@extend %tables-pagination-first-button-rtl;
					}

					&:last-child {
						@extend %tables-pagination-last-button-rtl;
					}
				}

				&.disabled {
					@extend %global-display-none;
				}
			}
		}
	}
}