.table {
	text-align: left;
	border: 2px solid $color-primary;
	padding: $space-4;

	.table-caption {
		text-align: left;
		font-size: $font-size-xl;
		background: $color-primary;
		width: max-content;
		color: $color-dark;
		padding: $space-1 $space-3;
		margin-bottom: 0;
	}

	&.table-empty {
		width: 100%;

		.is-empty {
			width: 100%;
			padding: $space-4;
			font-size: $font-size-base;
			color: $color-text-dark;
			text-align: left;
		}
	}

	.table-row {
		th,
		td {
			padding: $space-3 $space-5;
			font-size: $font-size-base;
			vertical-align: middle;
		}

		th {
			// header cell styles if needed
		}
	}

	.table-head {
		// thead styles
	}

	.table-body {
		// tbody styles
	}

	.table-foot {
		th,
		td {
			padding-top: $space-4;
		}
	}
}

.table-wrapper {
	width: 100%;
  overflow-x: auto;
}