//------------------------------------------------------------------------------------------------
// TABLE
//------------------------------------------------------------------------------------------------

/*
Table component for display tabular data.
*/

// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-table-border-color: 'light' !default;
$component-table-row-hover-color: 'very-light' !default;
$component-table-header-background-color: 'very-light' !default;
$component-table-collapse-even-row-color: 'very-light' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;

	tr {
		border: rem(1px) solid color($component-table-border-color);
		&:hover {
			background-color: color($component-table-row-hover-color);
		}
	}

	th,
	td {
		text-align: center;
		padding: rem(15px);
	}

	th {
		background-color: color($component-table-header-background-color);
	}

}


// COLLAPSE MODIFIER
//------------------------------------------------------------------------------------------------

/*
These responsive modifiers collapse table columns into 1, stacking rows
vertically. This is typically used for making the table fit on smaller screens.

Eg: .c-table--collapse@max-md collapses the table until md breakpoint is hit.
*/

@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq($until: #{$bp-name}) {
		.c-table--collapse\@max-#{$bp-name} {
			thead {
				border: none;
				clip: rect(0 0 0 0);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				width: 1px;
			}

			tr {
				display: block;
				&:not(:first-child) {
					border-top: 0;
				}
				&:nth-child(even) {
					background-color: color($component-table-collapse-even-row-color);
				}
				&:hover {
					background-color: transparent;
				}
			}

			td {
				display: block;
				text-align: right;
				border-bottom: rem(1px) solid color($component-table-border-color);
				&:last-child {
					border-bottom: 0;
				}
				&:before {
					content: attr(data-table-label);
					float: left;
					font-weight: bold;
				}
				&.c-table__full-width-label {
					text-align: left;
				}
			}
			&.c-table--full-width-labels {
				td {
					text-align: left;
				}
			}
		}
	}
}

/*
Attaching this 'c-table__full-width-label' class to a <td> within a table that uses the collapse modifier,
makes the <td>'s label go full width once the collapse is active. This allows for more space for lengthy content.

Adding `c-table--full-width-labels` to the parent `c-table` element add that behaviour to all labels.
*/

[class*='c-table--collapse'] .c-table__full-width-label,
[class*='c-table--collapse'].c-table--full-width-labels td {
	&:before {
		width: 100%;
		margin-bottom: rem(10px);
	}
}


// VERTICAL ALIGNMENT MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Allows for vertical alignment of content within table cells. Default: center.
*/

.c-table--top {
	th, td {
		vertical-align: top;
	}
}


// BORDER MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Removes all outer borders from the table. Use if the design calls for the
table to be touching the sides of its containing element.
*/

.c-table--bare {
	tr {
		border-left-color: transparent;
		border-right-color: transparent;
		&:first-child {
			border-top-color: transparent;
		}
	}
	&:last-child tbody tr:last-child {
		border-bottom-color: transparent;
	}
}

.c-table--grid {
	tr {
		border-width: 0;
	}
	td,
	th {
		border: rem(1px) solid color($component-table-border-color);
	}
}


// SIZE MODIFIERS
//------------------------------------------------------------------------------------------------

.c-table--small {
	th,
	td {
		padding: rem(5px);
	}
}