/*
 * Table (BMM-31) — the part of the source design theme.json cannot state.
 * Mirrors the captured CSS for `.table-container` / `.scrollable-table-
 * container` / `.scroll-arrows`, injected around `core/table` output by
 * inc/table.php. Border/zebra/cell rules have no theme.json style category
 * for a scroll wrapper, so they live here instead, same as button.css did
 * for BMM-19.
 */

/*
 * The source's whole block is `margin-top: 24px` and nothing else. Core sets
 * its own `.wp-block-table { margin: 0 0 1em 0 }`, and this theme's global
 * block-flow spacing (`:where(.is-layout-flow) > *`) adds another
 * `margin-block-start` on top of that — both need overriding. Doubled class
 * to out-specificity both regardless of stylesheet load order.
 *
 * The margin lives here, on the block-level element itself, rather than on
 * `.table-container` inside it — deliberately. A margin declared on
 * `.wp-block-table` is a real sibling margin, and normal CSS collapses two
 * adjoining sibling margins to their larger value automatically (no border
 * or padding sits between plain block boxes here). That is exactly "the
 * previous block's margin-bottom and this margin-top should overlap, not
 * stack" — for *any* preceding block, including ones that don't exist yet —
 * with no per-block-type list to maintain. A margin on `.table-container`
 * instead would not have collapsed: it is a *child* of `.wp-block-table`,
 * and would have added to whatever the previous sibling already
 * contributed rather than merging with it (confirmed live: 36px + 24px
 * rendered as 60px, not the intended 36px, before this was moved here).
 */
.wp-block-table.wp-block-table {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.wp-block-table .table-container {
	position: relative;
	border-radius: 4px;
	width: 100%;
	overflow: hidden;
}

.wp-block-table .scrollable-table-container {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--black) rgba(236, 236, 236, 0.5);
}

.wp-block-table .scrollable-table-container::-webkit-scrollbar {
	height: 3px;
}

.wp-block-table .scrollable-table-container::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--black);
}

.wp-block-table .scrollable-table-container::-webkit-scrollbar-track {
	background-color: rgba(236, 236, 236, 0.5);
}

/* Fade indicating more content to scroll to the right; toggled by table.js. */
.wp-block-table .scrollable-table-container.has-shadow::after {
	position: absolute;
	top: 0;
	left: 100%;
	box-shadow: -15px 0 10px rgba(0, 0, 0, 0.05);
	width: 3.125rem;
	height: 100%;
	content: "";
}

/*
 * Core's own `.wp-block-table table` sets `width: 100%`, which stretches
 * columns past their `max-width` to fill the container and can suppress the
 * overflow `min-width` is supposed to force — override it back to intrinsic
 * sizing so the column widths below are authoritative.
 */
.wp-block-table .table-container table {
	width: auto;
	border-collapse: collapse;
}

/*
 * The source resets `box-sizing: border-box` globally; this theme doesn't,
 * so without it here `min`/`max-width` would exclude the 1rem padding and
 * cells would render 32px wider than the reference.
 */
.wp-block-table .table-container th,
.wp-block-table .table-container td {
	box-sizing: border-box;
	border: none;
	padding: 1rem;
	min-width: 9.375rem;
	max-width: 12.5rem;
	text-align: left;
	vertical-align: top;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans-semicondensed);
	font-size: 0.875rem;
}

.wp-block-table .table-container thead {
	border-bottom: 2px solid var(--wp--custom--color--hairline);
}

.wp-block-table .table-container thead th {
	background-color: var(--wp--preset--color--white);
	font-weight: 700;
}

.wp-block-table .table-container tbody tr {
	border-bottom: 1px solid var(--wp--custom--color--hairline);
}

.wp-block-table .table-container tbody tr:last-child {
	border-bottom: none;
}

.wp-block-table .scroll-arrows {
	display: none;
}

@media only screen and (min-width: 768px) {

	.wp-block-table .scroll-arrows {
		display: flex;
		justify-content: flex-end;
	}

	.wp-block-table .scroll-arrows button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		margin: 0 0.25rem;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	.wp-block-table .scroll-arrows button[disabled] {
		opacity: 0.2;
		pointer-events: none;
	}

	.wp-block-table .scroll-arrows .chevron::before {
		display: block;
		transform: rotate(-135deg);
		border-top: 2px solid var(--wp--preset--color--ink);
		border-right: 2px solid var(--wp--preset--color--ink);
		width: 0.6rem;
		height: 0.6rem;
		content: "";
	}

	.wp-block-table .scroll-arrows .chevron.right::before {
		transform: rotate(45deg);
	}
}