/*
Tables

Styleguide 3.9
*/

/*
Table Object

.table - Base class for all table-styles.
.table.table--bordered - Extends the base '.table' class to an basic bordered table.
.table.table--striped - Extends the base '.table' class to an clean table with borders below each row.
.table.table--condensed - Extends the base '.table' class to an condensed table.
.table.table--zebra - Extends the base '.table' class to an 'zebra'-styled table with odd & even changing background-colors.

Markup:
<table class="{$modifiers}">
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Residence</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Max Mustermann</td>
			<td>20</td>
			<td>Berlin</td>
		</tr>
		<tr>
			<td>Max Mustermann</td>
			<td>20</td>
			<td>Berlin</td>
		</tr>
		<tr>
			<td>Max Mustermann</td>
			<td>20</td>
			<td>Berlin</td>
		</tr>
	</tbody>
</table>

Styleguide 3.9.1
*/
table {
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
th {
	text-align: $start;
	vertical-align: bottom;
}
td { vertical-align: top; }

.table {
	width: 100%;
	margin-top: 0;
	@extend %u-mb;
	td, th { padding: 0.5em; }
}

.table--bordered {
	border: 1px solid $basic-border-color;
	border-collapse: separate;
	td, th {
		border-left: 1px solid $basic-border-color;
		border-bottom: 1px solid $basic-border-color;
		&:first-child { border-left: 0; }
	}
	tr:last-child > td { border-bottom: 0; }
}

.table--striped {
	td, th { border-bottom: 1px solid $basic-border-color; }
	th { padding-top: 0; }
}

.table--condensed {
	td, th { padding: 0.25em 0.5em 0.25em; }
}

.table--zebra {
	tbody {
		tr:nth-child(even) { background: $content-background; }
		tr:nth-child(odd) { background: color-adjust($content-background, 5%); }
	}
}