// table
//
// Styles applied to the `table` element. Largely used to ensure sensible cell
// text alignment.
//
// Markup:
// <table>
//   <caption>Academy Awards for Best Picture</caption>
//   <colgroup>
//     <col>
//     <col>
//     <col span="2">
//   </colgroup>
//   <thead>
//     <tr>
//       <th scope="col">Film</th>
//       <th scope="col">Year</th>
//       <th scope="col">Production Company(s)</th>
//       <th scope="col">Producer(s)</th>
//     </tr>
//   </thead>
//   <tbody>
//     <tr>
//       <th scope="row">Ordinary People</th>
//       <td>1980</td>
//       <td>Paramount</td>
//       <td>Ronald L. Schwary</td>
//     </tr>
//     <tr>
//       <th scope="row">Chariots of Fire</th>
//       <td>1981</td>
//       <td>Enigma Film Productions</td>
//       <td>David Puttnam</td>
//     </tr>
//     <tr>
//       <th scope="row">Gandhi</th>
//       <td>1982</td>
//       <td>Columbia</td>
//       <td>Richard Attenborough</td>
//     </tr>
//     <tr>
//       <th scope="row">Terms of Endearment</th>
//       <td>1983</td>
//       <td>Paramount</td>
//       <td>James L. Brooks</td>
//     </tr>
//   </tbody>
// </table>
//
// Styleguide Base.table
table {
	color: currentColor;

	// caption {
	// }

	// Styles all table rows
	tr {
		transition: background-color $animation-duration-shorter $animation-easing-character;

		// States
		&:hover {
			@include var(background-color, card-background);
		}

		// User Queries
		@media screen and (prefers-reduced-motion: reduce) {
			transition: none;
		}
	}

	// Styles all table cells
	col,
	th,
	td {
		padding: 0.75rem;
	}

	th {
		font-weight: $font-weight-bold;
		vertical-align: bottom;
	}

	// colgroup {

	// 	col {
	// 	}
	// }

	thead {
		border-bottom: $border-thinner solid currentColor;

		tr {

			th {
				font-family: $font-family-secondary;
				font-size: $font-size-body;
				font-weight: $font-weight-bold;
			}
		}
	}

	tbody {

		tr {
			th {
				border-top-width: $border-thinnest;
				border-top-style: solid;
			}

			td {
				border-top-width: $border-thinnest;
				border-top-style: solid;
			}
		}
	}

	tfoot {

		tr {

			td {
				border-top-width: $border-thinnest;
				border-top-style: solid;
			}
		}
	}
}
