/*

Currently in use at:
- NDN
		Numerous pages
- DH.com
		Numerous pages
- Signup
		signup/src/presentation/components/PasswordOptions/index.js

Table

	There are two table styles.

	The default table (.Table) has 24px by 16px padding.

	The condensed table (.Table--condensed) has 16px padding
	all around.

	Add zebra striping with .Table--striped

	Add hierarchy with .Table__row, .Table__row--parent,
	and .Table__row--child

	Usage:
	<table class="Table Table--condensed">
		<thead>
			<th>Table head</th>
		</thead>
		<tbody>
			<tr class="Table__row">
				<td>Table data</td>
			</tr>
		</tbody>
	</table>

*/

.Table,
.Table__m {
	width: 100%;
	margin-bottom: 2rem;
	text-align: left;
	border-collapse: collapse;

	thead {
		border-bottom: 2px solid $c-g500;
	}

	th {
		padding: 1rem 0.5rem;
		@include fontsize($t-1);
		font-family: $heading;
		color: $c-black;
		text-transform: uppercase;
	}

	.Tag {
		text-decoration: none;
	}

}

// Default
.Table {
	tbody tr:last-child {
		border-bottom: 1px solid $c-g200;
	}

	td {
		padding: 1rem 0.5rem;
		vertical-align: middle;
		@include fontsize($t-1);
	}

	.Table__row {
		border-bottom: 1px solid $c-g200;
		border-top: 1px solid $c-g200;
	}

	.Table__row--parent {
		border-bottom: 0;
	}

	.Table__row--child {
		background-image: linear-gradient(to right, $c-g300 20%, rgba(255, 255, 255, 0) 0);
		background-position: top;
		background-size: 5px 1px;
		background-repeat: repeat-x;
	}
}

// Zebra stripes
.Table--striped {
	tbody tr:nth-child(odd) {background: $c-w100;}
	tbody tr:nth-child(even) {background: $c-g100;}
}

// Mobile
.Table__m {
	thead {
		display: none;
	}

	tbody tr {
		display: block;
		margin-bottom: 3.5rem;
		background: $c-g100;
		border: 1px solid $c-g200;
		border-radius: 5px;
		padding: 2rem 2rem 0.5rem;

		td {
			display: block;
			@include fontsize($t-1);
			padding: 1rem 0.5rem;
			vertical-align: middle;

			&:before {
				content: attr(data-title);
				display: inline-block;
				width: 100px;
				font-weight: $t-bold;
			}

			&:first-child:before {
				width: auto;
			}

			&:first-child,
			&:first-child a {
				@include fontsize($t-1);
				font-weight: $t-bold;
				text-transform: uppercase;
				letter-spacing: 1.5px;
			}

			&:last-child {
				margin-bottom: 1rem;
			}

			button, a {
				width: calc(100% - 1rem);
			}
		}

		@media (min-width: $medium-breakpoint) {
			width: auto;
		}
	}

	.Table__row,
	.Table__row--parent,
	.Table__row--child {
		border: 0;
	}

	.Table__row--child td:first-child {
		padding-left: 0.5rem;
	}

	@media (min-width: $medium-breakpoint) {
		thead {
			display: table-header-group;
		}

		tbody tr {
			display: table-row;
			margin-bottom: 0;
			border: 0;
			background: transparent;

			td {
				display: table-cell;
				@include fontsize($t-1);

				&:before {
					content: '';
					width: auto;
				}

				&:first-child,
				&:first-child a {
					@include fontsize($t-1);
					font-weight: $t-regular;
					text-transform: none;
					letter-spacing: 0;
				}

				button, a {
					width: auto;
				}
			}

			&:last-child {
				border-bottom: 1px solid $c-g200;
			}
		}

		.Table__row {
			border-bottom: 1px solid $c-g200;
			border-top: 1px solid $c-g200;
		}

		.Table__row--parent {
			border-bottom: 0;
		}

		.Table__row--child {
			background-image: linear-gradient(to right, $c-g300 20%, rgba(255, 255, 255, 0) 0);
			background-position: top;
			background-size: 5px 1px;
			background-repeat: repeat-x;

			td:first-child {
				padding-left: 2.5rem;
			}
		}
	}
}

// Condensed
.Table--condensed {
	thead {
		border-bottom: 1px solid $c-g300;
	}

	th, tbody tr td {
		padding: 0.5rem;
	}

	tbody tr,
	tbody tr:last-child {
		border-bottom: 1px solid $c-g200;
	}
}