.mf-record-chip {
	/* `display` beats the [hidden] default, so absence is restated here. */
	&[hidden] {
		display: none;
	}

	display: flex;
	flex-direction: column;
	gap: var(--mf-space-1);
	padding: var(--mf-space-3);
	border: var(--mf-border);
	background: var(--mf-color-surface);
	font-family: var(--mf-font-mono);

	/* Inside a box that already frames it: a second border only adds a line. */
	&[data-mf-variant="flat"] {
		padding: 0;
		border: 0;
		background: none;
	}
}

.mf-record-chip-kind {
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-tiny);
	letter-spacing: var(--mf-track-caption);
	text-transform: uppercase;
}

.mf-record-chip-title {
	margin: 0;
	color: var(--mf-color-text);
}

.mf-record-chip-sub {
	margin: 0;
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-small);

	&:empty {
		display: none;
	}
}

.mf-record-chip-actions {
	display: flex;
	gap: var(--mf-space-2);
	margin-top: var(--mf-space-1);

	&:empty {
		display: none;
	}
}