//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

// Basic Tables

%Vlt-table-cell-hover {
	@media #{$L-plus} {
		// Limiting to desktop because on mobile it's not good
		// Declaring this in the td because otherwise in Firefox the background covers the borders
		background-color: $grey-lighter;
	}
}

.Vlt-table {
	/* TEMPORARILY REMOVED DUE TO A BUG IN CHROME FOR LINUX
	background: linear-gradient(90deg, rgba($black, 0.1) 0%, transparent 30%), linear-gradient(90deg, transparent 70%, rgba($black, 0.1) 100%) 100% 0;
	background-color: $white;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	*/
	display: flex; // Takes care of an artifact that appears on certain screen sizes due to the shadow effect.
	margin-bottom: $unit1;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	width: 100%;
	z-index: 1;

	// Standard tables
	table {
		@extend %Vlt-table-inner;

		tr {
			position: relative;
		}

		thead {
			th {
				@extend %Vlt-table-header-cell;
			}
		}

		td,
		th {
			@extend %Vlt-table-cell;
		}

		tbody {
			tr {
				&:hover {
					> td {
						@extend %Vlt-table-cell-hover;
					}
				}
			}
		}
	}

	// Div tables
	&__inner {
		@extend %Vlt-table-inner;
	}

	&__header {
		.Vlt-table__cell {
			@extend %Vlt-table-header-cell;
			@extend %Vlt-table-cell;
		}
	}

	&__cell {
		@extend %Vlt-table-cell;
		display: table-cell;
	}

	&__footer {
		.Vlt-table__cell {
			@extend %Vlt-table-data-footer-cell;
		}
	}

	& &__row {
		&:hover {
			.Vlt-table__cell {
				@extend %Vlt-table-cell-hover;
			}
		}

		&--noline {
			.Vlt-table__cell,
			> td {
				border-bottom: 0;
			}
		}

		&--nohighlight {
			&:hover {
				.Vlt-table__cell,
				> td {
					background-color: transparent;
				}
			}
		}
	}

	// All tables

	&--tall {
		.Vlt-table__cell {
			@extend %Vlt-table-tall-padding;
		}

		table {
			td {
				@extend %Vlt-table-tall-padding;
			}
		}
	}

	&--short {
		.Vlt-table__cell {
			@extend %Vlt-table-short-padding;
		}

		table {
			td {
				@extend %Vlt-table-short-padding;
			}
		}
	}

	&--nowrap {
		td,
		th,
		.Vlt-table__cell {
			white-space: nowrap;
		}
	}

	&--fixed {
		table {
			@media #{$M-plus} {
				table-layout: fixed;
			}
		}
	}

	&--nohighlight {

		.Vlt-table__row {
			&:hover {
				.Vlt-table__cell {
					background-color: transparent;
				}
			}
		}

		table {
			tbody {
				tr {
					&:hover {
						> td {
							background-color: transparent;
						}
					}
				}
			}
		}
	}

	&--bordered {
		border-bottom: 1px solid $grey-light;
		border-left: 1px solid $grey-light;
		border-radius: 2px 2px $unit0 $unit0;
		border-right: 1px solid $grey-light;
		border-top: 1px solid $grey-light;
	}

	// To deprecate in v2.0
	table tbody &__cell,
	table tfoot &__cell {
		&--number {
			text-align: right;
		}

		&--neg {
			color: $red;
		}

		&--pos {
			color: $green;
		}

		&--avg {
			color: $yellow;
		}

		&--nowrap {
			white-space: nowrap;
		}
	}

	// To deprecate in v2.0
	.Vlt-btn {
		@extend %Vlt-btn--small;
		@extend %Vlt-btn--app;
		margin-bottom: -$unit0;
		margin-top: -$unit0;
	}

	&__pagination {
		padding: $unit1;
		text-align: center;

		ul {
			display: inline-flex;
			flex-flow: row wrap;

			li {
				border-radius: $unit1;
				font-size: 1.2rem;
				line-height: 2.4rem;
				margin-left: $unit0;
				min-width: 24px;
				text-align: center;

				&:first-child {
					margin-left: 0;
				}

				a {
					border-radius: $unit1;
					color: $black;
					line-height: 1.6rem;
					padding: $unit0;

					&,
					&:visited {
						color: $black;
						display: block;
						height: 100%;
						width: 100%;

						&:hover {
							background: rgba($black, 0.12);
							color: $black;
							font-weight: 600;
							text-decoration: none;
						}
					}
				}

				&.Vlt-table__pagination__prev,
				&.Vlt-table__pagination__next {
					a {
						&:hover {
							background: none;
							color: $purple-dark;
							font-weight: 400;
						}
					}
				}

				&.Vlt-table__pagination__prev {
					margin-right: $unit1;
				}

				&.Vlt-table__pagination__next {
					margin-left: 12px;
				}
			}
		}

		&__current {
			background: rgba($black, 0.05);
			font-weight: 600;
		}
	}

	// Mobile stack for traditional tables

	&--mobile-stack,
	&--mobile-stack.Vlt-table--data {
		@media #{$S-only} {
			background: none;

			table {
				background: none;
				display: flex;
				max-width: 100%;
				min-width: 100%;
				overflow: hidden;
				white-space: nowrap;
				width: auto;

				thead {
					display: flex;
					flex-shrink: 0;
					min-width: min-content;

					th {
						border-bottom: 1px solid $grey-light;
						border-top: 0;
						font-size: 1.5rem;
						height: auto;
						min-height: 3.6rem;
						padding: 13px 16px 10px;
					}
				}

				tr {
					display: flex;
					flex-flow: column;
					flex-shrink: 0;
					min-width: min-content;
				}

				tbody {
					background: linear-gradient(90deg, rgba($black, 0.1) 0%, transparent 30%), linear-gradient(90deg, transparent 70%, rgba($black, 0.1) 100%) 100% 0;
					background-repeat: no-repeat;
					background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
					display: flex;
					overflow-x: auto;
					overflow-y: hidden;
					position: relative;

					tr {
						&:first-child {
							background: linear-gradient(90deg, $white 20px, transparent 20px);
						}

						&:last-child {
							background: linear-gradient(90deg, transparent calc(100% - 20px), $white calc(100% - 20px)) 100% 0;
						}
					}
				}

				td,
				th {
					border-left: 0;
					border-right: 0;
					display: block;
					white-space: nowrap;
				}

				.Vlt-table__cell--number {
					text-align: left;
				}

				tfoot {
					display: none;
				}
			}

			&:not(.Vlt-table--data) {
				table {
					thead th {
						border-right: 1px solid $grey-light;
						padding-left: 0;
						padding-right: $unit2;
					}

					tbody td {
						padding-left: $unit2;
						padding-right: $unit2;
					}
				}
			}
		}
	}

	// Sortable columns styles for all tables - to be deprecated as we changed plugin

	&__col {
		&--sortable {
			cursor: pointer;
			padding-left: 16px;
			position: relative;

			&:before {
				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.37873%200.265338L0%202.71856L1.24253%204L3%202.1875L4.75747%204L6%202.71856L3.62127%200.265338C3.45648%200.0954422%203.23301%200%203%200C2.76699%200%202.54352%200.0954422%202.37873%200.265338V0.265338Z%22%2F%3E%0A%3Cpath%20d%3D%22M3%207.8125L1.24253%206L0%207.28144L2.37873%209.73466C2.54352%209.90456%202.76699%2010%203%2010C3.23301%2010%203.45648%209.90456%203.62127%209.73466L6%207.28144L4.75747%206L3%207.8125Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				content: '';
				display: inline-block;
				height: 10px;
				left: 5px;
				margin-top: -5px;
				opacity: 0.6;
				position: absolute;
				top: 50%;
				width: 6px;
			}
		}

		&--descending,
		&--ascending {
			color: $black;
			font-weight: 600;
		}

		&--descending {
			&:before {
				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M3%207.8125L1.24253%206L0%207.28144L2.37873%209.73466C2.54352%209.90456%202.76699%2010%203%2010C3.23301%2010%203.45648%209.90456%203.62127%209.73466L6%207.28144L4.75747%206L3%207.8125Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
			}
		}

		&--ascending {
			&:before {
				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.37873%200.265338L0%202.71856L1.24253%204L3%202.1875L4.75747%204L6%202.71856L3.62127%200.265338C3.45648%200.0954422%203.23301%200%203%200C2.76699%200%202.54352%200.0954422%202.37873%200.265338Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
			}
		}
	}

	// Hover buttons 

	td:not(.Vlt-btn-group) {
		.Vlt-btn + .Vlt-btn {
			margin-left: $unit0;
		}
	}

	td.Vlt-btn-group {
		min-height: 0;
	}

	tfoot {
		td {
			@extend %Vlt-table-data-footer-cell;
		}
	}

	// Sortable style with sortable plugin (no jQuery)

	&[data-sortable] {
		th:not([data-sortable='false']) {
			cursor: pointer;
			padding-left: 16px;
			position: relative;
			user-select: none;

			&:before {
				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.37873%200.265338L0%202.71856L1.24253%204L3%202.1875L4.75747%204L6%202.71856L3.62127%200.265338C3.45648%200.0954422%203.23301%200%203%200C2.76699%200%202.54352%200.0954422%202.37873%200.265338V0.265338Z%22%2F%3E%0A%3Cpath%20d%3D%22M3%207.8125L1.24253%206L0%207.28144L2.37873%209.73466C2.54352%209.90456%202.76699%2010%203%2010C3.23301%2010%203.45648%209.90456%203.62127%209.73466L6%207.28144L4.75747%206L3%207.8125Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				content: '';
				display: inline-block;
				height: 10px;
				left: 5px;
				margin-top: -4px;
				opacity: 0.6;
				position: absolute;
				top: 50%;
				width: 6px;
			}
		}

		th[data-sorted='true'] {
			color: $black;
			font-weight: 600;
		}

		th[data-sorted-direction='descending'] {
			&:before {
				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M3%207.8125L1.24253%206L0%207.28144L2.37873%209.73466C2.54352%209.90456%202.76699%2010%203%2010C3.23301%2010%203.45648%209.90456%203.62127%209.73466L6%207.28144L4.75747%206L3%207.8125Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				opacity: 1;
			}
		}

		th[data-sorted-direction='ascending'] {
			&:before {
				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.37873%200.265338L0%202.71856L1.24253%204L3%202.1875L4.75747%204L6%202.71856L3.62127%200.265338C3.45648%200.0954422%203.23301%200%203%200C2.76699%200%202.54352%200.0954422%202.37873%200.265338Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				opacity: 1;
			}
		}
	}

	&--cols {
		td,
		th,
		.Vlt-table__cell {
			&:not(:first-child) {
				border-left: 1px solid rgba($black, 0.1);
			}
		}
	}
}

// Data Tables

.Vlt-table--data {

	.Vlt-table__inner,
	table {
		font-size: 1.4rem;
		width: 100%;
	}

	.Vlt-table__header {
		.Vlt-table__cell {
			@extend %Vlt-table-data-header-cell;
		}
	}

	table {
		thead {
			th {
				@extend %Vlt-table-data-header-cell;
			}
		}
	}

	&--cols {
		td,
		th,
		.Vlt-table__cell {
			&:not(:first-child) {
				border-left: 1px solid rgba($black, 0.1);
			}
		}
	}

	&.Vlt-table--data--dark {
		table {
			thead {
				th {
					@extend %Vlt-table-data-header-cell-dark;
				}
			}
		}

		.Vlt-table__header {
			.Vlt-table__cell {
				@extend %Vlt-table-data-header-cell-dark;
			}
		}

		&.Vlt-table--data--cols,
		&.Vlt-table--cols {
			thead {
				th + th {
					@extend %Vlt-table-data-header-cell-dark-cols;
				}
			}

			.Vlt-table__header {
				.Vlt-table__cell {
					&:not(:first-child) {
						@extend %Vlt-table-data-header-cell-dark-cols;
					}
				}
			}
		}
	}

	&.Vlt-table--data--teal {
		table {
			thead {
				th {
					@extend %Vlt-table-data-header-cell-teal;
				}
			}
		}

		.Vlt-table__header {
			.Vlt-table__cell {
				@extend %Vlt-table-data-header-cell-teal;
			}
		}

		&.Vlt-table--data--cols,
		&.Vlt-table--cols {
			thead {
				th + th {
					@extend %Vlt-table-data-header-cell-teal-cols;
				}
			}

			.Vlt-table__header {
				.Vlt-table__cell {
					&:not(:first-child) {
						@extend %Vlt-table-data-header-cell-teal-cols;
					}
				}
			}
		}

		&.Vlt-table--bordered {
			border-bottom: 1px solid $teal-lighter;
			border-left: 1px solid $teal-lighter;
			border-right: 1px solid $teal-lighter;
		}
	}

	&.Vlt-table--data--orange {
		table {
			thead {
				th {
					@extend %Vlt-table-data-header-cell-orange;
				}
			}
		}

		.Vlt-table__header {
			.Vlt-table__cell {
				@extend %Vlt-table-data-header-cell-orange;
			}
		}

		&.Vlt-table--data--cols,
		&.Vlt-table--cols {
			thead {
				th + th {
					@extend %Vlt-table-data-header-cell-orange-cols;
				}
			}

			.Vlt-table__header {
				.Vlt-table__cell {
					&:not(:first-child) {
						@extend %Vlt-table-data-header-cell-orange-cols;
					}
				}
			}
		}

		&.Vlt-table--bordered {
			border-bottom: 1px solid $orange-lighter;
			border-left: 1px solid $orange-lighter;
			border-right: 1px solid $orange-lighter;
		}
	}
}

%Vlt-table-header-cell {
	border-bottom: 1px solid $black;
	color: $black;
	font-size: 1.4rem;
	font-weight: 600;
	padding: 10px $unit2 7px;
}

%Vlt-table-cell {
	background-clip: padding-box; // Needed for Firefox, otherwise the background covers the borders
	border-bottom: 1px solid $grey-light;
	min-height: 3.6rem;
	min-width: min-content;
	padding: 13px $unit2 10px;
	text-align: left;
	vertical-align: middle;
}

%Vlt-table-data-header-cell {
	background-color: $grey-lighter;
	border-bottom: 1px solid $black;
	color: $black;
	font-size: 1.4rem;
	height: 3.6rem;
	padding: 10px $unit2 7px;
}

%Vlt-table-data-header-cell-dark {
	background-color: $grey-light;
	border-bottom-color: $black;
	color: $black;
}

%Vlt-table-data-header-cell-dark-cols {
	border-left-color: $grey;
}

%Vlt-table-data-cell-teal-cols {
	border-left-color: $teal-lighter;
}

%Vlt-table-data-header-cell-teal {
	background-color: $teal-lighter;
	border-bottom-color: $teal;
	color: $teal-text;
}

%Vlt-table-data-header-cell-teal-cols {
	border-left-color: $teal-light;
}

%Vlt-table-data-cell-orange-cols {
	border-left-color: $orange-lighter;
}

%Vlt-table-data-header-cell-orange {
	background-color: $orange-lighter;
	border-bottom-color: $orange;
	color: $orange-text;
}

%Vlt-table-data-header-cell-orange-cols {
	border-left-color: $orange-light;
}

%Vlt-table-data-footer-cell {
	border-bottom: 0;
	font-weight: bold;
}

%Vlt-table-inner {
	/* TEMPORARILY REMOVED DUE TO A BUG IN CHROME FOR LINUX
	background: linear-gradient(90deg, $white 20px, transparent 20px), linear-gradient(90deg, transparent calc(100% - 20px), $white calc(100% - 20px)) 100% 0;*/
	font-size: 1.5rem;
	min-width: min-content;
	width: 100%;
}

%Vlt-table-tall-padding {
	padding-bottom: $unit2;
	padding-top: $unit2;
}

%Vlt-table-short-padding {
	padding-bottom: $unit0;
	padding-top: $unit0;
}