// =================================================================
// Tables Settings
// =================================================================

// Table Margin
//
// Base margin for the table tag.
//
// Styleguide Content.Tables.Margin
//
// Access: Public
//
// Since: 1.0.0

$table-margin:                             0 !default;

// Table Padding
//
// Base padding for the table.
//
// Styleguide Content.Tables.Padding
//
// Access: Public
//
// Since: 1.0.0

$table-padding:                           1em 1em !default;

// Table Line Height
//
// Base line height for the table.

$table-line-height:                            1.5em !default;

// Border
//
// Default border for tables.
//
// Styleguide Content.Tables.Border
//
// Access: Public
//
// Since: 1.0.0

$table-border:                             1px solid !default;
// $table-border:                             $border !default;

// Table Heading Color
//
// Default color for table headings.
//
// Styleguide Content.Tables.Table Heading Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-table-head:                         $color-heading !default;

// Table Heading Background Color
//
// Default background for table headings.
//
// Styleguide Content.Tables.Table Heading Background Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$table-head-bg:                            $color-grayscale-e !default;

// Table Caption Padding
//
// Default padding for table captions.
//
// Styleguide Content.Tables.Caption Padding
//
// Access: Public
//
// Since: 1.0.0

$table-caption-padding:                    0 0 10px !default;

// Table Caption Color
//
// Default color for table captions.
//
// Styleguide Content.Tables.Caption Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-table-caption:                      $color-grayscale-6 !default;

// Table Striped Background Color
// Default background for striped table backgrounds.
//
// Styleguide Content.Tables.Striped Background Color
//
// Access: Public
//
// Since: 1.0.0

$table-stripes:                            $color-grayscale-f5 !default;

// =================================================================
// Tables Styles
// =================================================================

// Controls base styling for tables.
//
// Access: Public
//
// Since: 1.0.0

table {
	@extend %font-size-secondary;
	border: var(--table-border, var(--bu-border, #{$table-border}));
	border-collapse: collapse;
	empty-cells: show;
	line-height: $table-line-height;
	margin: var(--table-margin, #{$table-margin});
	overflow: hidden;
	width: 100%;

	caption {
		color: var(--table-caption-color, #{$color-table-caption});
		font-style: italic;
		padding: var(--table-caption-padding, #{$table-caption-padding});
		text-align: center;
	}

	td,
	th {
		border-left: var(--table-border, var(--bu-border, #{$table-border}));
		font-size: inherit;
		margin: 0;
		overflow: visible; // to make ths where the title is really long work
		padding: var(--table-padding, #{$table-padding});

		&:first-child {
			border-left-width: 0;
		}

		&[class*="col-"] {
			display: table-cell;
			float: none;
		}
	}

	th {
		border-bottom: var(--table-border, var(--bu-border, #{$table-border}));
	}

	td {
		background-color: transparent;
		vertical-align: top;
	}

	thead {
		background: var(--table-head-background, #{$table-head-bg});
		color: var(--table-head-color, #{$color-table-head});
		text-align: left;
		vertical-align: bottom;
		z-index: 0;

		&::before {
			border-left: 100vw solid;
			content: '';
			display: block;
			opacity: 0.1;
			position: absolute;
			top: 0;
			left: auto;
			bottom: 0;
			right: 0;
			z-index: -1;
		}
	}

	col[class*="col-"] { // Despite what CodeClimate says this is necessary.
		display: table-column;
		float: none;
	}
}

// Striped Table Class
//
// Adds stripes to tables using the `table-striped` class.
//
// Styleguide Content.Tables.Striped Table Class
//
// Access: Public
//
// Since: 1.0.0

.table-striped tr:nth-child(2n-1),
.u-odd {
	// background: $table-stripes;
	td {
		background: var(--table-stripes, #{$table-stripes});
		position: relative;
		z-index: 0;
		overflow: hidden;

		&::after {
			border-left: 100vw solid;
			border-top: 0;
			content: '';
			display: block;
			opacity: 0.05;
			position: absolute;
			top: 0;
			left: auto;
			bottom: 0;
			right: 0;
			z-index: -1;



		}
	}
}

// Bordered tables
// -----------------------------------------------------------------

// Bordered Table Class
//
// Adds both horizontal and vertical borders
// using the `table-bordered` class.
//
// Styleguide Content.Tables.Bordered Table Class
//
// Access: Public
//
// Since: 1.0.0

.table-bordered {
	td {
		border-bottom: var(--table-border, var(--bu-border, #{$table-border}));
	}
}

// Horizontal tables
// -----------------------------------------------------------------

// Horizontal Tables
//
// Switches the border on tables from vertical to horizontal
// using the `table-horizontal` class.
//
// Styleguide Content.Tables.Horizontal Table Class
//
// Access: Public
//
// Since: 1.0.0

.table-horizontal {
	td,
	th {
		border: 0;
		border-bottom: var(--table-border, var(--bu-border, #{$table-border}));
	}
}

// Removes the border at the bottom of tables to avoid overlap

.table-bordered,
.table-horizontal,
.section-row {
	tbody > {
		tr:last-child {
			td {
				border-bottom-width: 0;
			}
		}
	}
}

// BU Table Sorter override

table.sortable {
	thead {
		tr {
			th {
				&.header {
	border: var(--table-border, var(--bu-border, #{$table-border}));
				}
			}
		}
	}

	td,
	th {
		padding: $table-padding;
	}
}


// Responsive Tables

.responsive-table {
	.table-striped {
		thead {
			&::before {
				@media screen and (max-width: 970px)  {
					border-bottom: 10em solid;
					border-left: 0;
					top: auto;
					left: 0;
				}
			}
		}
	}

	.table-striped tr:nth-child(2n-1),
	.u-odd {
		td {
			&::after {
				@media screen and (max-width: 970px)  {
					border-left: 0;
					border-top: 3em solid;
					left: 0;
					bottom: auto;
				}
			}
		}
	}
}