.mf-status-bar {
	display: flex;
	align-items: stretch;
	background: var(--mf-color-surface);
	border-top: var(--mf-border);

	/* The line the command line used to draw itself, now spanning the whole bar. */
	&:has(.mf-command-line.is-focused) {
		border-top-color: var(--mf-color-border-strong);
	}

	.mf-command-line {
		flex: 1 1 auto;
		border-top: 0;
	}

	/* One strip of cells sharing their edges; the header rails space theirs out. */
	.mf-widget-rail {
		flex: 0 0 auto;
		gap: 0;
	}

	.mf-widget {
		align-self: stretch;
		padding: 0 var(--mf-space-3);
		border: 0;
		border-left: var(--mf-border);
		font-size: var(--mf-font-size-tiny);
	}

	.mf-widget-action:hover,
	.mf-widget-action:focus-visible {
		background: var(--mf-color-surface-raised);
	}
}

.mf-status-command {
	flex: 1 1 auto;
	min-width: 0;
}

/* Theatre, not status: the tube states that it is recording whatever is on it. */
[data-mf-widget="rec"] {
	color: var(--mf-color-danger);

	.mf-widget-icon {
		color: inherit;
		animation: mf-rec-blink 1.4s steps(1) infinite;
	}
}

@keyframes mf-rec-blink {
	50% {
		opacity: 0;
	}
}