@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

$table-cell-vertical-padding: tokens.$spacer-5 !default;
$table-cell-horizontal-padding: tokens.$spacer-6 !default;
$table-cell-padding-compact: tokens.$spacer-3 !default;
$table-cell-padding-loose: tokens.$spacer-8 !default;

$table-caption-padding: tokens.$spacer-6 !default;
$table-caption-size: tokens.$font-size-9 !default;
$table-caption-spacing: tokens.$letter-spacing-medium !default;

.table-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.table {
	width: 100%;
	font-size: tokens.$font-size-8;
	border-collapse: collapse;
	table-layout: auto;

	&:not(.table-simple) {
		border: 1px solid tokens.$table-border-dark;
	}

	caption {
		padding: $table-caption-padding;
		font-size: $table-caption-size;
		font-weight: tokens.$weight-semibold;
		letter-spacing: $table-caption-spacing;
		text-align: end;
		text-transform: uppercase;
	}

	th,
	td {
		display: table-cell;
		word-wrap: break-word;
		padding: $table-cell-vertical-padding $table-cell-horizontal-padding;
		border-block-start: 1px solid tokens.$table-border-dark;
		line-height: 1.5;
		vertical-align: top;
	}

	th:not([align]) {
		text-align: start;
	}

	&.table-stacked-mobile {
		@include mixins.discouraged-mobile {
			th,
			td {
				display: block;
				width: 100%;
			}

			th:not(:nth-child(1)),
			td:not(:nth-child(1)) {
				padding-block-start: 0;
				border-width: 0;
			}

			thead tr:nth-child(1) th,
			tbody tr:nth-child(1) td {
				border-block-start: none;
			}

			thead tr > th:last-child {
				border-block-end: 1px solid tokens.$table-border-dark;
			}
		}
	}

	&.table-borderless {
		border: none;

		th,
		td {
			border: none;
		}
	}

	&.table-complex {
		thead tr,
		tfoot tr {
			background-color: tokens.$table-header;
		}

		th,
		td {
			border: 1px solid tokens.$table-border-dark;
		}
	}

	&.table-striped {
		tbody tr:nth-of-type(even) {
			background-color: tokens.$table-row;
		}
	}

	&.table-sm {
		th,
		td {
			padding: $table-cell-padding-compact;
		}
	}

	&.table-lg {
		th,
		td {
			padding: $table-cell-padding-loose;
		}
	}
}