/*
 * Info table — rows of a title and its text, side by side or stacked, with an
 * optional header bar and round ticks.
 *
 * Restyle via the --info-table-* custom properties (the block styles in
 * styles/blocks/info-table-*.json do exactly that) rather than by mirroring
 * this file. Each falls back to the default look.
 *
 *   --info-table-bg             panel background
 *   --info-table-border         panel border (shorthand)
 *   --info-table-radius         panel corners
 *   --info-table-head-bg        header bar background
 *   --info-table-rule           line between rows
 *   --info-table-pad-x          row and header side padding
 *   --info-table-marker-size    tick circle size
 *   --info-table-marker-radius  tick corners
 *   --info-table-marker-bg      tick before it fills
 *   --info-table-marker-border  tick border before it fills (colour)
 *   --info-table-tick-bg        tick once filled
 *   --info-table-tick-color     tick glyph
 *   --info-table-title-width    title column share in the columns layout
 */

.info-table {
	/* The rows measure the table, not the viewport — see the container query. */
	container-type: inline-size;
	border: var(--info-table-border, 0);
	border-radius: var(--info-table-radius, 0);
	overflow: clip;
	background-color: var(--info-table-bg, var(--wp--preset--color--raised));
}

.info-table__list {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

/*
 * Rows and the header share one grid, so header labels sit over their columns.
 * Stacked is the base: title beside the tick, text under the title.
 */
.info-table__head,
.info-table__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "title" "text";
	column-gap: var(--wp--preset--spacing--s);
	padding-inline: var(--info-table-pad-x, var(--wp--preset--spacing--m));
}

.info-table.has-marker .info-table__head,
.info-table.has-marker .info-table__row {
	grid-template-columns: var(--info-table-marker-size, 1.75rem) minmax(0, 1fr);
	grid-template-areas: "marker title" ". text";
}

/* Stacked has no column to label, so the head label starts on the tick's edge,
   not the title's. The columns layout below puts it back over its column. */
.info-table.has-marker .info-table__head {
	grid-template-areas: "title title";
}

.info-table__head {
	margin: 0;
	padding-block: var(--wp--preset--spacing--xs);
	background-color: var(--info-table-head-bg, var(--wp--preset--color--inset));
	font-size: var(--wp--custom--label--font-size);
	font-weight: var(--wp--custom--label--font-weight);
	letter-spacing: var(--wp--custom--label--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--custom--label--color);
}

.info-table__head-title {
	grid-area: title;
}

.info-table__head-text {
	grid-area: text;
	display: none;
}

.info-table__row {
	/* Tight: the text reads as the title's second line. The 1.75rem tick is
	   about one title line tall, so it adds no height to the title row. */
	row-gap: calc(var(--wp--preset--spacing--xxs) / 2);
	padding-block: var(--wp--preset--spacing--m);
	border-top: 1px solid var(--info-table-rule, var(--wp--custom--border--color));
}

.info-table__row:first-child {
	border-top: none;
}

.info-table__marker {
	grid-area: marker;
	display: grid;
	place-items: center;
	width: var(--info-table-marker-size, 1.75rem);
	height: var(--info-table-marker-size, 1.75rem);
	border: 1px solid var(--info-table-marker-border, transparent);
	border-radius: var(--info-table-marker-radius, var(--wp--preset--border-radius--circle));
	background-color: var(--info-table-marker-bg, var(--wp--preset--color--inset));
	color: var(--info-table-tick-color, var(--wp--preset--color--white));
	transition: background-color var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}

.info-table__marker svg {
	width: 55%;
	height: 55%;
}

/*
 * Ticks start empty and fill in as the table scrolls into view (view.js).
 */
.info-table.is-animated .info-table__marker svg {
	opacity: 0;
	transform: scale(0.5);
	transition: opacity var(--wp--custom--transition--base), transform var(--wp--custom--transition--base);
}

.info-table__row.is-checked .info-table__marker {
	border-color: var(--info-table-tick-bg, var(--wp--preset--color--primary));
	background-color: var(--info-table-tick-bg, var(--wp--preset--color--primary));
}

.info-table__row.is-checked .info-table__marker svg {
	opacity: 1;
	transform: scale(1);
}

/* A heading-level title inherits the display family, weight and colour from
   the theme; restate all three, since only the LEVEL is wanted here, not the
   heading look. */
.info-table__title {
	grid-area: title;
	align-self: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--font-weight--bold);
	color: inherit;
}

.info-table__text {
	grid-area: text;
	margin: 0;
	color: var(--wp--custom--foreground--muted);
	text-wrap: pretty;
}

/* Label title: small caps in the accent colour, text at full strength. */
.info-table--label .info-table__title {
	font-size: var(--wp--custom--label--font-size);
	letter-spacing: var(--wp--custom--label--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--custom--label--color);
}

.info-table--label .info-table__text {
	color: inherit;
}

/*
 * Columns layout — title and text side by side, a header label over each.
 *
 * Switches on the table's OWN width, not the viewport's, so it holds wherever
 * the block is placed (a narrow column, a sidebar, a full-width section).
 * 30rem is where the title column stops leaving the text a usable measure;
 * tune it here, and nowhere else. Below it the table falls back to stacked.
 */
@container (width > 30rem) {
	.info-table--columns .info-table__head,
	.info-table--columns .info-table__row {
		grid-template-columns: minmax(0, var(--info-table-title-width, 0.5fr)) minmax(0, 1fr);
		grid-template-areas: "title text";
		align-items: center;
	}

	.info-table--columns.has-marker .info-table__head,
	.info-table--columns.has-marker .info-table__row {
		grid-template-columns: var(--info-table-marker-size, 1.75rem) minmax(0, var(--info-table-title-width, 0.5fr)) minmax(0, 1fr);
		grid-template-areas: "marker title text";
	}

	/* Labels line up with the first line of text rather than its middle. */
	.info-table--columns.info-table--label .info-table__row {
		align-items: baseline;
	}

	.info-table--columns .info-table__head-text {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.info-table__marker,
	.info-table.is-animated .info-table__marker svg {
		transition: none;
	}
}