Table with rounded corners

/* =================================================================
          	              Rounded Tables           
   ================================================================= */

root: {

  	/* Tables */
  	--ads-table-border-color: #000000;
  	--ads-table-border-color-dark: #4D4D4D;
  	--ads-table-head-background-color: transparent;
  	--ads-table-head-background-color-dark: transparent;
  
	/* Border radius */
  	--ads-border-radius: 10px;

}

table.tableblock {
	border-color: var(--ads-table-border-color);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--ads-border-radius);
	background: none;
	overflow: hidden;
	}

table.tableblock th {
	background-color: var(--ads-table-head-background-color);
	font-weight: bold;
}

table.tableblock td {
	padding: .6em .8em;
	text-align: left;
}

table thead th:first-child {
	border-top-left-radius: var(--ads-border-radius);
}

table thead th:last-child {
	border-top-right-radius: var(--ads-border-radius);
}

table tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--ads-border-radius);
}

table tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--ads-border-radius);
}

table:not(:has(thead)) tbody tr:first-child td:first-child {
	border-top-left-radius: var(--ads-border-radius);
}

table:not(:has(thead)) tbody tr:first-child td:last-child {
	border-top-right-radius: var(--ads-border-radius);
}

@media vivliostyle {
	table {
		border-color: var(--ads-table-border-color-dark);
	}

table.tableblock th,
table.tableblock td {
	background-color: var(--ads-table-head-background-color-dark);
	}
}

@media (prefers-color-scheme: dark) {
	table.tableblock, table.tableblock td, table.tableblock th {
		border-color: var(--ads-table-border-color-dark);
	}
}