/**
 * core/table/wrapping
 */

.wp-block-table.has-wrapping-cells-mobile {
	border-inline-start: 0;
	container: wrapping-table / inline-size;
}

.wp-block-table.has-wrapping-cells-mobile table {
	border-inline-start: 1px solid var(--table--border--color);
}

@container wrapping-table (width < 550px) {
	.wp-block-table.has-wrapping-cells-mobile table {
		border-inline-start: 0;
	}

	.wp-block-table.has-wrapping-cells-mobile :is(table, thead) {
		display: block;
	}

	.wp-block-table.has-wrapping-cells-mobile tbody {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.wp-block-table.has-wrapping-cells-mobile tbody tr {
		display: contents;
		background-color: var(--wp--preset--color--base);
	}

	.wp-block-table.has-wrapping-cells-mobile tbody td {
		border: 0;
		border-block-start: 1px solid var(--table--border--color);
		border-inline-start: 1px solid var(--table--border--color);
	}

	/* If is striped, create pseudo row colors */
	.wp-block-table.has-wrapping-cells-mobile.is-style-stripes tbody tr:nth-child(6n+3) td:not(:last-child),
	.wp-block-table.has-wrapping-cells-mobile.is-style-stripes tbody tr:nth-child(6n+1) td:nth-child(3),
	.wp-block-table.has-wrapping-cells-mobile.is-style-stripes tbody tr:nth-child(6n+2) td:first-child,
	.wp-block-table.has-wrapping-cells-mobile.is-style-stripes tbody tr:nth-child(6n+4) td:not(:first-child),
	.wp-block-table.has-wrapping-cells-mobile.is-style-stripes tbody tr:nth-child(6n+5) td:nth-child(3),
	.wp-block-table.has-wrapping-cells-mobile.is-style-stripes tbody tr:nth-child(6n+6) td:first-child {
		background-color: var(--table--color--background);
	}
}