.mf-widget-rail {
	display: flex;
	align-items: center;
	gap: var(--mf-space-3);
}

.mf-widget {
	display: inline-flex;
	align-items: center;
	gap: var(--mf-space-1);
	font-family: var(--mf-font-mono);
	font-size: var(--mf-font-size-small);
	line-height: var(--mf-font-line-height-tight);
	white-space: nowrap;
}

.mf-widget-action {
	padding: var(--mf-space-1) var(--mf-space-2);
	background: none;
	border: var(--mf-border);
	color: var(--mf-color-text);
	transition: color var(--mf-transition-fast), border-color var(--mf-transition-fast);

	&:hover,
	&:focus-visible {
		border-color: var(--mf-color-border-strong);
		color: var(--mf-color-text-bright);
		outline: none;

		/* Glyph and label brighten together, or the cell reads as two things. */
		.mf-widget-icon {
			color: inherit;
		}
	}

	/* The state it stands for is the one the shell is in: pressed, not offered. */
	&[data-mf-active] {
		border-color: var(--mf-color-border-strong);
		background: var(--mf-color-surface-raised);
		color: var(--mf-color-accent-strong);
	}
}

.mf-widget-text {
	color: var(--mf-color-text);
}

.mf-widget-icon {
	color: var(--mf-color-accent);
}