@use '../styles/mixins';

// The Content page's table ("2 · Content" board): 44px capitalised head,
// 68px rows on hairline dividers, 16px between columns.
.modula-admin-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-control);

	th,
	td {
		padding: 0 8px;
		text-align: start;
		vertical-align: middle;
	}

	th {
		height: var(--modula-admin-table-head-height);
		border-bottom: 1px solid var(--modula-admin-border);
		color: var(--modula-admin-ink-muted);
		font-size: var(--modula-admin-text-table-head);
		font-weight: 400;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		white-space: nowrap;
	}
}

.modula-admin-table__select-col {
	width: 56px;
}

.modula-admin-table__row {
	transition: background var(--modula-admin-transition);

	td {
		height: var(--modula-admin-table-row-height);
		border-bottom: 1px solid var(--modula-admin-border-divider);
	}

	&:hover:not(.is-loading) {
		background: var(--modula-admin-surface-sunken);
	}
}

// The column filter trigger: the head's text as a button, tinted while its
// menu is open or the filter is active.
.modula-admin-table__filter {
	@include mixins.button-reset;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	margin-inline-start: -8px;
	padding: 0 8px;
	border-radius: var(--modula-admin-radius-sm);
	letter-spacing: inherit;
	text-transform: inherit;

	&:hover {
		color: var(--modula-admin-ink);
	}

	&[aria-expanded="true"],
	&.is-active {
		background: var(--modula-admin-surface-segment);
		color: var(--modula-admin-ink);
	}
}

.modula-admin-table__filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--modula-admin-radius-pill);
	background: var(--modula-admin-ink);
	color: var(--modula-admin-ink-inverse);
	font-size: 11px;
	letter-spacing: 0;
}

.modula-admin-table__option-count {
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
	font-variant-numeric: tabular-nums;
}

.modula-admin-table__filter-clear {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--modula-admin-border-divider);
}

// The reserved second line: both contents share one grid cell, so swapping
// them never changes the row's height.
.modula-admin-table__hover-line {
	display: grid;
	min-width: 0;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-help);

	> * {
		grid-area: 1 / 1;
		min-width: 0;
		white-space: nowrap;
	}
}

// Hidden by opacity, not visibility: the actions stay in the tab order, and
// focusing one activates the row.
.modula-admin-table__hover-actions {
	opacity: 0;

	.is-active > & {
		opacity: 1;
	}
}

.modula-admin-table__hover-rest {
	.is-active > & {
		visibility: hidden;
	}
}

.modula-admin-table__expansion td {
	padding: 2px 8px 18px 56px;
	border-bottom: 1px solid var(--modula-admin-border-divider);
	background: var(--modula-admin-surface-sunken);
}

.modula-admin-table__empty {
	padding: 80px 8px;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-body);

	// Outranks the table's `text-align: start` for cells.
	.modula-admin-table & {
		text-align: center;
	}
}