/* One row rhythm, so a glyph and a line of text occupy the same height and the
   rows stay flush; 21px is the small font at the standard line height. */
.mf-table {
	--mf-table-line: 21px;

	/* Definite, not shrink-to-fit: the text column below asks for `max-width: 0`, which
	   resolves against nothing in a flex or inline host — the column would then take no
	   share at all and its title would be clipped away. */
	width: 100%;
}

.mf-table-grid {
	width: 100%;
	border-collapse: collapse;
}

/* Every column shrinks to its widest cell, so one value sizes the whole column;
   the text columns then share whatever is left over. */
.mf-table-head,
.mf-table-cell {
	width: 1%;
	white-space: nowrap;
}

/* Zero preferred width: the column takes the space left over, not the space its
   longest line wants, so a long line is clipped instead of widening the table.

   Scoped to the table's own cells: the role marks are shared vocabulary, and unscoped
   this table-layout trick reached every other component's cells — on a grid item
   `max-width: 0` clips the cell itself away. */
.mf-table-head[data-mf-role="text"],
.mf-table-cell[data-mf-role="text"] {
	width: 100%;
	max-width: 0;
	white-space: normal;
}

.mf-table-head[data-mf-role="icon"],
.mf-table-cell[data-mf-role="icon"] {
	width: var(--mf-table-line);
	padding-inline-end: 0;
}

.mf-table-head {
	padding: var(--mf-space-2) var(--mf-space-3);
	border-bottom: var(--mf-border);
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-tiny);
	font-weight: normal;
	letter-spacing: var(--mf-track-heading);
	text-transform: uppercase;
	text-align: start;

	&[data-mf-align="end"] {
		text-align: end;
	}
}

.mf-table-row {
	transition: background var(--mf-transition-fast);

	&:hover {
		background: var(--mf-color-surface-raised);
	}

	/* The held row: what the rest of the screen is showing (DataTable.select). The
	   accent is spent here, on the one row of a listing being read. */
	&[aria-current="true"] {
		background: var(--mf-color-surface-raised);

		& > .mf-table-cell {
			color: var(--mf-color-accent);
		}

		& .mf-table-lead {
			color: var(--mf-color-accent);
		}
	}
}

/* No rule under a row: the hover band and the spacing separate one line from the next. */
.mf-table-cell {
	padding: var(--mf-space-1) var(--mf-space-3);
	color: var(--mf-color-text);
	font-size: var(--mf-font-size-small);
	line-height: var(--mf-table-line);
	/* Not baseline: a glyph and a line of text do not share one, and the row
	   would grow by the difference. */
	vertical-align: top;

	&[data-mf-align="end"] {
		text-align: end;
	}

	/* Hosts tint a class glyph through this; unset, it reads as the row. */
	&[data-mf-role="icon"] {
		color: var(--mf-table-tint, inherit);

		.mf-icon {
			/* A table cell hands a replaced child no width to resolve against. */
			min-width: var(--mf-table-line);
			min-height: var(--mf-table-line);
			width: var(--mf-table-line);
			height: var(--mf-table-line);
		}
	}

	/* An index says where the row sits, a trailing value what it is — neither
	   competes with the title, so both step back in size or tone. */
	&[data-mf-role="index"],
	&[data-mf-role="value"] {
		color: var(--mf-color-text-muted);
		font-variant-numeric: tabular-nums;
	}

	&[data-mf-role="value"] {
		font-size: var(--mf-font-size-tiny);
	}
}

/* The title and its aside on one line, the aside pushed to the far edge. */
.mf-table-text {
	display: flex;
	align-items: baseline;
	gap: var(--mf-space-3);
	position: relative;
	min-height: var(--mf-table-line);
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

/* The aside gives way first; the row's tooltip keeps the full text. */
.mf-table-info {
	margin-inline-start: auto;
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-tiny);
}

/* The row's one target: a link or a bare press, drawn the same either way. Its colour is
   the terminal's link colour (`.mf-link`, core/base.css); only the reset is the table's.
   No focus ring — the caret below marks the row instead. */
.mf-table-lead {
	padding: 0;
	line-height: inherit;
	text-align: inherit;

	&:focus-visible {
		outline: none;
	}
}

/* The cursor: on the current row, and on whichever row the caret is on. Scoped to the
   row, or any current-marked ancestor would mark every lead beneath it. Out of flow —
   in flow it would take a line of its own and shift the row. */
.mf-table-row[aria-current="true"] .mf-table-lead::before,
.mf-table-lead:focus-visible::before {
	content: ">";
	position: absolute;
	inset-inline-start: -1.1em;
}

.mf-table-empty {
	padding: var(--mf-space-2) var(--mf-space-3);
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-small);
}