/**
 * Table block styles.
 *
 * Loaded only on pages where a Table block is rendered (and in the
 * editor), via highrise_enqueue_block_styles() in functions.php.
 *
 * WordPress's own table stylesheet draws a border around every cell and a
 * thick line under the header. These rules replace that with a lighter
 * look: horizontal lines only, and a header row styled like the eyebrow.
 */

/* Body text a step smaller than paragraphs, so tables read as data. */
.wp-block-table table {
	font-size: var(--wp--preset--font-size--small);
}

/**
 * Cells.
 *
 * Remove WordPress's border on all four sides, and draw a thin Mist line
 * along the bottom of each cell instead. Text lines up with the top of
 * the cell, which reads better when cells wrap onto several lines.
 */
.wp-block-table :is(th, td) {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--mist);
	text-align: start;
	vertical-align: top;
}

/**
 * The header row.
 *
 * Styled like the eyebrow block style: Space Mono, extra small, uppercase
 * and spaced out, in Ink. A 2px Ink line separates it from the body,
 * replacing WordPress's 3px line on the thead.
 */
.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table thead th {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The footer row, if used, gets the same 2px Ink line above it. */
.wp-block-table tfoot {
	border-top: 2px solid var(--wp--preset--color--ink);
}

.wp-block-table tfoot :is(th, td) {
	border-bottom: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/*
 * The caption's space below the table. Its font and colour come from the
 * shared caption style in theme.json and global.css.
 */
.wp-block-table figcaption {
	margin-block-start: var(--wp--preset--spacing--30);
}

/**
 * Stripes style.
 *
 * This is WordPress's own "Stripes" table style, restyled to fit the
 * theme. Odd rows get a Paper Dark background in place of WordPress's
 * grey, and the row lines are removed because the stripes separate the
 * rows instead.
 */

/* Remove the grey line WordPress draws under the whole table. */
.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--paper-dark);
}

.wp-block-table.is-style-stripes tbody :is(th, td) {
	border-bottom: 0;
}

/**
 * WordPress makes every cell border transparent in this style, which
 * would also hide the header line. This puts the 2px Ink line back.
 */
.wp-block-table.is-style-stripes thead th {
	border-bottom-color: var(--wp--preset--color--ink);
}

/**
 * Card style.
 *
 * Adds the is-style-card class, registered in functions.php. The box
 * (white background, faint Mint border and the Mint corner squares) comes
 * from the shared pixel card rules in global.css. The rules below adjust
 * that box for a table.
 */
.wp-block-table.is-style-card {
	/*
	 * No padding, so the Ink header row runs to the edges of the card.
	 * The cells provide their own padding.
	 */
	padding: 0;

	/*
	 * WordPress sets overflow-x: auto on tables so wide tables can scroll.
	 * That would clip the corner squares, which sit just outside the box,
	 * so it is turned off here. Keep card tables to a few columns so they
	 * fit on small screens.
	 */
	overflow: visible;
}

/* The header row: Ink background with Mist text. */
.wp-block-table.is-style-card thead th {
	border-bottom: 0;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--mist);
}

/* No line under the last row, as the card's border closes the table. */
.wp-block-table.is-style-card tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

/* Give the caption the same side padding as the cells. */
.wp-block-table.is-style-card figcaption {
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--mist);
}

/**
 * Status style.
 *
 * Adds the is-style-status class, registered in functions.php. Taken from
 * the rows in the mockup's job sync card: a label on the left after an
 * Ink square, and its status on the right in small Mint Space Mono.
 *
 * Use a two-column table with no header: the label in the first column
 * and the status in the second. A thin Mist line runs above each row,
 * and there is no line under the last one.
 */
.wp-block-table.is-style-status {
	/* Remove the grey line WordPress draws under the whole table. */
	border-bottom: 0;
}

.wp-block-table.is-style-status :is(th, td) {
	padding: 11px 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--mist);
	vertical-align: middle;
}

/* The label, after a 9px Ink square. */
.wp-block-table.is-style-status :is(th, td):first-child::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-inline-end: 10px;
	background-color: var(--wp--preset--color--ink);
	vertical-align: middle;
}

/*
 * Editor only: keep the label on the same line as the square.
 *
 * In the editor WordPress wraps each cell's text in a block-level
 * .wp-block-table__cell-content box so it can be typed in, which pushed
 * the text onto the line below the square. The class doesn't exist on the
 * front end, so this changes nothing there.
 */
.wp-block-table.is-style-status .wp-block-table__cell-content {
	display: inline-block;
	vertical-align: middle;
}

/* The status, pushed to the right. */
.wp-block-table.is-style-status :is(th, td):last-child {
	padding-inline-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--mint);
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: end;
	white-space: nowrap;
}

/* On dark backgrounds the square turns Mist so it stays visible. */
:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
) .wp-block-table.is-style-status :is(th, td):first-child::before {
	background-color: var(--wp--preset--color--mist);
}