@layer base {
	.b-table {
		--table-border-color: var(--color-gray-400);

		width: 100%;
		margin: var(--spacing-6) 0;
		border-collapse: collapse;
		border: 1px solid var(--table-border-color);
		border-radius: var(--radius-2);

		&--striped &__row {
			&:nth-child(even) {
				background-color: var(--color-gray-200);
			}
		}

		&__cell {
			padding: var(--spacing-3) var(--spacing-4);
			border-bottom: 1px solid var(--table-border-color);
			border-right: 1px solid var(--table-border-color);
			vertical-align: top;
			font-size: var(--font-size-sm);
			line-height: var(--line-height-base);

			&:last-child {
				border-right: none;
			}

			.b-inline-code {
				white-space: nowrap;
			}
		}

		&__header {
			vertical-align: bottom;
			text-align: left;
			font-weight: var(--font-weight-bold);
			font-family: var(--font-family-heading);
			background-color: var(--color-gray-200);
		}

		&-wrapper {
			margin: 0;
			overflow-x: auto;
			overflow-y: hidden;
		}
	}

	.b-prose table {
		@extend .b-table;

		&--striped tr {
			@extend .b-table--striped;
		}

		tr {
			@extend .b-table__row;
		}

		td, th {
			@extend .b-table__cell;
		}

		thead {
			@extend .b-table__header;
		}
	}
}
