@import '~heading.less';
@import '../../resources/fontawesome/fontawesome.less';
@import '../../resources/fontawesome/solid.less';

.Table {
	overflow-y: visible !important;
	border: none !important;

	:global(.rt-table) {
		overflow-x: auto !important;
	}

	:global(.rt-tbody) {
		overflow: visible !important;
	}

	:global(.rt-table),
	:global(.rt-tbody) {
		:global(.rt-thead) {
			:global(.rt-th) {
				outline: none;
				padding: 0 !important;
				min-width: 50px !important;

				&:global(:first-child) > div > div {
					padding-left: 20px !important;
				}

				&:global(:last-child) > div > div {
					&:global(:not(.sorted)) {
						padding-right: 17px !important;
					}

					&:global(.sorted) {
						padding-right: 32px !important;

						:global(.sort) {
							right: 0 !important;
							padding-right: 11px !important;
							width: 31px !important;
						}
					}
				}

				:global(.selected) {
					outline: none;
				}

				:global(.rt-resizer) {
					z-index: 5 !important;
				}
			}

			&:global(.-header) {
				box-shadow: none !important;
				background: @background !important;

				:global(.rt-tr) {
					border-color: @greyLight;
					border-width: 1px 0px 1px 1px;
					border-style: solid;

					:global(.rt-th) {
						border: 0 !important;
					}
				}
			}

			&:global(.-headerGroups) {
				background: @white !important;
				border: none !important;

				:global(.rt-tr) {
					border: 0 !important;

					:global(.rt-th) {
						background: @white !important;
						border: 0 !important;
						box-shadow: inset -1px 0 0 @greyLight !important;

						&:empty {
							border: none !important;
						}

						&:not(:empty) + :not(:empty) {
							border-width: 1px 1px 0 0;
						}

						span {
							text-align: center;
						}
					}
				}
			}
		}

		:global(.rt-tr-group) {
			border-color: @greyLight;
			border-width: 0 0 0 1px;
			border-style: solid;

			:global(.rt-td) {
				padding: 0 !important;
				min-width: 50px !important;
				border: none !important;

				&:global(:first-child) > div {
					padding-left: 20px !important;
				}

				&:global(:last-child) > div {
					padding-right: 20px !important;
				}

				:global(span) {
					user-select: none;
				}
			}
		}
	}

	&:global(.noBorder) {
		:global(.rt-table),
		:global(.rt-tbody) {
			:global(.rt-thead) {
				&:global(.-header .rt-tr) {
					border-color: @greyLight;
					border-width: 0 0 1px 0px;
					border-style: solid;

					:global(.rt-th:first-child) {
						border-width: 0;
					}

					:global(.rt-th:last-child) {
						div {
							box-shadow: none !important;

							:global(.sort) {
								border-right: none !important;
							}
						}
					}
				}

				&:global(.-headerGroups .rt-tr) {
					border: 0 !important;

					:global(.rt-th) {
						border-width: 0 0 1px !important;
						border-color: @greyLight !important;
						border-style: solid !important;

						&:not(:empty) + :not(:empty) {
							border-width: 0 1px 1px 0;
						}

						&:last-child {
							box-shadow: none !important;
							border-width: 0 0 1px;

							div {
								box-shadow: none !important;

								:global(.sort) {
									border-right: none !important;
								}
							}
						}
					}
				}
			}
			
			:global(.rt-tr-group) {
				border-width: 0;

				:global(.rt-tr .rt-td:last-child) > :global(div:not(.selected)) {
					box-shadow: inset 0 -1px 0 #EEE;
				}
			}
		}
	}

	&:global(.-striped) {
		:global(.rt-tr.-even) {
			background: @zebra;
		}

		:global(.rt-tr.-odd) {
			background: @white !important;
		}
	}

	:global(.-pagination) {
		box-shadow: none;
		border: none;
		padding: 15px 20px;
		font-size: 13px;
		line-height: 13px !important;

		:global(.-previous),
		:global(.-next) {
			flex: 0 1;

			:global(button) {
				padding: 10px;
				background: @white !important;
				border: 1px solid @greyLight;
				border-radius: 0;
				color: @greyDark;
				line-height: 13px !important;
				font-size: 13px !important;
				height: 39px !important;
				width: 39px !important;

				&:global(:disabled) {
					opacity: 1;
					color: @greyLight !important;
				}

				&:global(:not([disabled]):hover) {
					color: @greyDark !important;
					border: 1px solid @greyMedium;
				}

				i {
					margin: 0 !important;
				}
			}
		}

		:global(.-center) {
			justify-content: center;

			> span {
				margin-top: 0;
				margin-bottom: 0;
			}

			input {
				background: @white !important;
				border: 1px solid @greyLight;
				border-radius: 0;
				color: @greyDark;
				line-height: 39px !important;
				height: 39px !important;
				margin: 0 5px;
				padding: 0;
			}

			select {
				background: @white !important;
				border: 1px solid @greyLight;
				border-radius: 0 !important;
				-webkit-appearance: none;
				-webkit-border-radius: 0 !important;
				-moz-border-radius: 0 !important;
				color: @greyDark;
				line-height: 38px !important;
				height: 39px !important;
				margin: 0 5px;
				padding: 0 4px 0 10px;
			}
		}

		:global(.-next) {
			:global(button) {
				content: " ";
			}
		}
	}
}

.Header {
	background: @background;
	padding: 10px 20px 10px 10px;
	min-height: 36px;
	text-align: left;
	font-weight: 500;
	color: @greyMedium;
	display: flex;
	justify-content: space-between;
	align-items: center;
	outline: none;
	box-shadow: inset -1px 0 0 @greyLight;
	position: relative;
	
	&:global(.selected) {
		background: darken(@background, 3%);

		&:global(.sorted) {
			:global(.sort) {
				background: darken(@background, 3%) !important;
			}
		}
	}

	&:global(:not(.sorted)) {
		padding-right: 10px;
	}

	:global(.-headerGroups) & {
		text-align: center;
	}

	&:global(.align-center) {
		text-align: center;
	}

	&:global(.align-right) {
		text-align: right;
	}

	:global(span) {
		flex: 1 0 auto;
	}

	:global(.sort) {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 10px 0;
		width: 20px;
		border-right: 1px solid @greyLight;
		text-align: center;

		i {
			.fa-icon();
			.fas();
			color: @greyMedium;
			margin: 0 !important;
			text-align: center;
		}
	}

	&:global(.sorted)  {
		:global(.sort) {
			background: @background;
		}
	}

	&:global(.toggle) {
		padding: 10px;

		> :global(span) {
			text-align: center;
		}
	}
}

.Cell {
	padding: 10px;
	min-height: 36px;
	height: 100%;
	line-height: 15px;
	box-shadow:
		inset 0 -1px 0 @greyLight,
		inset -1px 0 0 @greyLight;
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	outline: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: none !important;

	&:global(.align-center) {
		text-align: center;
	}

	&:global(.align-right) {
		text-align: right;
	}

	&:global(.disabled) {
		color: @greyMedium !important;

		:global(i.exclamation) {
			.fa-icon();
			.fas();
			margin: 0 2px 0 -10px;
			vertical-align: text-bottom;
			text-align: left;
			font-size: 15px;
		}
	}

	&:global(.selected) {
		background: fadeout(@primary, 97%);
		outline: none;

		&:global(.top) {
			box-shadow:
				inset 0 1px 0 @primary,
				inset -1px 0 0 @greyLight,
				inset 0 -1px 0 @greyLight;

			&:global(.right) {
				box-shadow:
					inset 0 1px 0 @primary,
					inset -1px 0 0 @primary,
					inset 0 -1px 0 @greyLight;

				&:global(.bottom) {
					box-shadow:
						inset 0 1px 0 @primary,
						inset -1px 0 0 @primary,
						inset 0 -1px 0 @primary;

					&:global(.left) {
						box-shadow:
							inset 0 1px 0 @primary,
							inset -1px 0 0 @primary,
							inset 0 -1px 0 @primary,
							inset 1px 0 0 @primary;
					}
				}

				&:global(.left) {
					box-shadow:
						inset 0 1px 0 @primary,
						inset -1px 0 0 @primary,
						inset 1px 0 0 @primary,
						inset 0 -1px 0 @greyLight;
				}
			}

			&:global(.bottom) {
				box-shadow:
					inset 0 1px 0 @primary,
					inset 0 -1px 0 @primary,
					inset -1px 0 0 @greyLight;

				&:global(.left) {
					box-shadow:
						inset 0 1px 0 @primary,
						inset 0 -1px 0 @primary,
						inset 1px 0 0 @primary,
						inset -1px 0 0 @greyLight;
				}
			}

			&:global(.left) {
				box-shadow:
					inset 0 1px 0 @primary,
					inset 1px 0 0 @primary,
					inset 0 -1px 0 @greyLight,
					inset -1px 0 0 @greyLight;
			}
		}

		&:global(.right) {
			box-shadow:
				inset -1px 0 0 @primary,
				inset 0 -1px 0 @greyLight;

			&:global(.left) {
				box-shadow:
					inset -1px 0 0 @primary,	
					inset 1px 0 0 @primary,
					inset 0 -1px 0 @greyLight;
			}
		}

		&:global(.bottom) {
			box-shadow:
				inset 0 -1px 0 @primary,
				inset -1px 0 0 @greyLight;

			&:global(.right) {
				box-shadow:
					inset -1px 0 0 @primary,
					inset 0 -1px 0 @primary;
			}

			&:global(.right.left) {
				box-shadow:
					inset -1px 0 0 @primary,
					inset 0 -1px 0 @primary,
					inset 1px 0 0 @primary;
			}

			&:global(.left) {
				box-shadow:
					inset 0 -1px 0 @primary,
					inset 1px 0 0 @primary,
					inset -1px 0 0 @greyLight;
			}
		}

		&:global(.left) {
			box-shadow:
				inset 1px 0 0 @primary,
				inset -1px 0 0 @greyLight,
				inset 0 -1px 0 @greyLight;
		}
	}

	> span {
		font-size: 11px;
		line-height: 11px;
		color: @greyMedium;
		display: block;
		margin-top: 5px;
	}

	a {
		color: inherit;

		&:hover {
			color: @primary;
		}
	}
}

.SelectAll {
	height: 0;
	line-height: 40px;
	font-size: 13px;
	padding: 0 20px;
	color: @greyMedium;
	transition: height .5s;
	overflow: hidden;

	&:global(.visible) {
		height: 40px;
		border-bottom: 1px solid @greyLight;
	}

	button {
		background: none !important;
		margin-left: 5px !important;
		font-size: 13px !important;
		color: @greyDark !important;
		padding: 0 0 0 20px !important;
	}
}

.Empty {
	text-align: center;
	padding: 50px;
	color: @greyMedium;

	i {
		font-size: 100px;
		color: lighten(@greyMedium, 20%);
	}

	h2 {
		margin: 20px 0 10px;
	}
}