.table-wrapper {
	overflow-x: auto;
	border-radius: 10px;
	border: solid 1px var(--form-field-border-colour);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.06),
		0 2px 8px rgba(0, 0, 0, 0.04);
}

table.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

table.table caption {
	padding: var(--spacer-one) var(--spacer-two);
	font-size: 13px;
	text-align: left;
	caption-side: top;
}

table.table th {
	padding: var(--spacer-one) var(--spacer-two);
	text-align: left;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: solid 2px var(--form-field-border-colour);
	white-space: nowrap;
}

table.table td {
	padding: var(--spacer-one) var(--spacer-two);
	border-bottom: solid 1px var(--form-field-border-colour);
	vertical-align: middle;
}

table.table tbody tr:last-child td {
	border-bottom: none;
}

table.table tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.025);
}

table.table tbody tr:hover {
	background: rgba(0, 0, 0, 0.05);
}

@media screen and (prefers-color-scheme: dark) {
	.table-wrapper {
		border-color: rgba(255, 255, 255, 0.12);
		box-shadow:
			0 1px 3px rgba(0, 0, 0, 0.2),
			0 2px 8px rgba(0, 0, 0, 0.3);
	}

	table.table th {
		border-bottom-color: rgba(255, 255, 255, 0.12);
	}

	table.table td {
		border-bottom-color: rgba(255, 255, 255, 0.06);
	}

	table.table tbody tr:nth-child(even) {
		background: rgba(255, 255, 255, 0.03);
	}

	table.table tbody tr:hover {
		background: rgba(255, 255, 255, 0.07);
	}
}