/*
** See also: '@mixin base-elements' in '__vars/_typography'
** which defines base styles
*/

.overflow-x {
	// see _utils
}

$table-responsive-titles-breakpoint: 40rem;

[class^="table--responsive-titles"] {
	// give a <td> a data-title attribute to display
	// its column heading at small widths

	@media (max-width: $table-responsive-titles-breakpoint) {
		thead, th {
			display: none;
		}

		tr {
			border-bottom: 1px solid $grey--borders;
		}

		td {
			display: block;
			padding-top: $spacing-xs;
			padding-bottom: $spacing-xs;

			&[data-title]::before {
				content: attr(data-title) ': ';
				font-weight: bold;
				padding-right: 0.35em;
			}

			&:first-child {
				padding-top: $spacing-md;
			}

			&:last-child {
				padding-bottom: $spacing-md;
			}
		}
	}
}

.table--plain {
	tr {
		background: none;
		border: none;
	}

	td {
		padding-top: $spacing-xs;
		padding-bottom: $spacing-xs;
	}
}