shelving/ui/block/Table.module.css

Toolkit for using data in JavaScript.

@import "../style/base.css";

@layer components {
	.table,
	.prose table {
		display: table;
		margin-inline: 0;
		margin-block: var(--table-spacing, var(--spacing-paragraph));
		text-indent: 0;

		border-color: inherit;
		border-collapse: collapse;
		text-align: var(--table-align, left);

		/* Children */
		th,
		td {
			padding-block: var(--table-padding, var(--space-xsmall));
			padding-inline: var(--table-padding, var(--space-xsmall));
			border-block: var(--table-thickness, var(--thickness, var(--stroke-normal))) solid var(--table-color-border, var(--color-vivid));
		}
		th:first-child,
		td:first-child {
			padding-inline-start: 0;
		}
		th:last-child,
		td:last-child {
			padding-inline-end: 0;
		}
		thead,
		tbody th,
		tfoot {
			font-weight: var(--table-header-weight, var(--weight-strong));
		}
		thead th,
		thead td {
			padding-block-start: 0;
			border: 0;
		}
		tfoot th,
		tfoot td {
			padding-block-end: 0;
			border: 0;
		}
		thead th,
		tfoot th {
			font-weight: var(--table-label-weight, var(--weight-strong));
			font-size: var(--table-label-size, var(--size-small));
		}
	}
}

@layer overrides {
	.table,
	.prose table {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}