//
// Basic Bootstrap table
//

.jupiterx-post-content table,
.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: @spacer;
	background-color: @table-bg; // Reset for nesting within parents with `background-color`.

	th,
	td {
		padding: @table-cell-padding;
		vertical-align: top;
        border-top: @table-border-width solid @table-border-color;
	}

	thead th {
		vertical-align: bottom;
		border-bottom: (2 * @table-border-width) solid @table-border-color;
	}

	tbody + tbody {
		border-top: (2 * @table-border-width) solid @table-border-color;
	}

	.table {
		background-color: @body-background;
	}
}


//
// Condensed table w/ half padding
//

.table-sm {
	th,
	td {
		padding: @table-cell-padding-sm;
	}
}


// Border versions
//
// Add or remove borders all around the table and between all the columns.

.table-bordered {
	border: @table-border-width solid @table-border-color;

	th,
	td {
		border: @table-border-width solid @table-border-color;
	}

	thead {
		th,
		td {
			border-bottom-width: (2 * @table-border-width);
		}
	}
}

.table-borderless {
	th,
	td,
	thead th,
	tbody + tbody {
		border: 0;
	}
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)

.table-striped {
	tbody tr:nth-of-type(@{table-striped-order}) {
		background-color: @table-accent-bg;
	}
}


// Hover effect
//
// Placed here since it has to come after the potential zebra striping

.table-hover {
	tbody tr {
		&:hover {
			background-color: @table-hover-bg;
		};
	}
}


// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.

// #each-theme-color-table-row(@i: 1) when (@i =< length(@theme-colors)) {
// 	@item: extract(@theme-colors, @i);
// 	@color: extract(@item, 1);
// 	@colorValue: extract(@item, 2);

// 	#table-row-variant(@color, theme-color-level(@color, -9));

// 	#each-theme-color-table-row((@i + 1));
// } #each-theme-color-table-row();

// #table-row-variant(active, @table-active-bg);


// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.

.table {
	.thead-dark {
		th {
			color: @table-dark-color;
			background-color: @table-dark-bg;
			border-color: @table-dark-border-color;
		}
	}

	.thead-light {
		th {
			color: @table-head-color;
			background-color: @table-head-bg;
			border-color: @table-border-color;
		}
	}
}

.table-dark {
	color: @table-dark-color;
	background-color: @table-dark-bg;

	th,
	td,
	thead th {
		border-color: @table-dark-border-color;
	}

	&.table-bordered {
		border: 0;
	}

	&.table-striped {
		tbody tr:nth-of-type(odd) {
			background-color: @table-dark-accent-bg;
		}
	}

	&.table-hover {
		tbody tr {
			&:hover {
				background-color: @table-dark-hover-bg;
			};
		}
	}
}


// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.

.table-responsive {
	// #each-breakpoint-responsive-table(@i: 1) when (@i =< length(@grid-breakpoints)) {
	// 	@breakpoint: extract(extract(@grid-breakpoints, @i), 1);
	// 	@next: breakpoint-next(@breakpoint, @grid-breakpoints);
	// 	@infix: breakpoint-infix(@next, @grid-breakpoints);

	// 	&@{infix} {
	// 		#media-breakpoint-down(@breakpoint, {
	// 			display: block;
	// 			width: 100%;
	// 			overflow-x: auto;
	// 			-webkit-overflow-scrolling: touch;
	// 			-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057

	// 			// Prevent double border on horizontal scroll due to use of `display: block;`
	// 			> .table-bordered {
	// 				border: 0;
	// 			}
	// 		});
	// 	}

	// 	#each-breakpoint-responsive-table((@i + 1));
	// } #each-breakpoint-responsive-table();
}