.mf-button {
	display: inline-flex;
	align-items: center;
	gap: var(--mf-space-2);
	/* Never wider than its slot, and never two lines: a press gives up its words
	   rather than its shape. */
	min-width: 0;
	max-width: 100%;
	padding: var(--mf-space-1) var(--mf-space-3);
	white-space: nowrap;
	background: var(--mf-color-surface);
	border: var(--mf-border);
	color: var(--mf-color-text);
	font: inherit;
	font-family: var(--mf-font-mono);
	/* Under a panel title: a press never out-ranks the box that holds it. */
	font-size: var(--mf-font-size-small);
	line-height: var(--mf-font-line-height-tight);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: color var(--mf-transition-fast), border-color var(--mf-transition-fast),
		background var(--mf-transition-fast);

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

	&:hover:not(:disabled),
	&:focus-visible {
		border-color: var(--mf-color-border-strong);
		color: var(--mf-color-accent);
		outline: none;
	}

	&[data-mf-variant="primary"] {
		border-color: var(--mf-color-border-strong);
		color: var(--mf-color-accent);

		&:hover:not(:disabled),
		&:focus-visible {
			background: var(--mf-color-accent);
			color: var(--mf-color-background);
		}
	}

	/* No frame, so it sits beside a control without competing with it. */
	&[data-mf-variant="ghost"] {
		background: none;
		border-color: transparent;
		color: var(--mf-color-text-muted);

		&:hover:not(:disabled),
		&:focus-visible {
			border-color: transparent;
			color: var(--mf-color-accent);
		}
	}

	&[data-mf-variant="danger"] {
		color: var(--mf-color-danger);

		/* Brighter, not merely framed: frameless, colour is all it can answer with. */
		&:hover:not(:disabled),
		&:focus-visible {
			border-color: var(--mf-color-danger);
			color: var(--mf-color-danger-strong);
		}
	}

	/* A press that carries a state the surface is IN, not one it offers. Filled rather
	   than framed, and it keeps that reading under the pointer — a hover that undid it
	   would say the state had gone off. */
	&[aria-pressed="true"]:not(:disabled) {
		&,
		&:hover,
		&:focus-visible {
			background: var(--mf-color-accent);
			border-color: var(--mf-color-accent);
			color: var(--mf-color-background);
		}
	}

	&:disabled {
		border-color: var(--mf-color-border);
		color: var(--mf-color-text-muted);
		cursor: not-allowed;
	}

	/* Frameless enabled, frameless disabled: a border appearing on the way out reads
	   as a different control. Out of the hit test too, so the hover line goes with it. */
	&[data-mf-variant="ghost"]:disabled,
	&[data-mf-icon-only]:disabled {
		border-color: transparent;
		opacity: 0.6;
		pointer-events: none;
	}

	/* The glyph is the button; the label stays for the screen reader. Frameless in
	   every variant, so a row of glyphs reads as one instrument. */
	&[data-mf-icon-only] {
		background: none;
		border-color: transparent;
		padding-inline: var(--mf-space-2);

		&:hover:not(:disabled),
		&:focus-visible {
			border-color: transparent;
		}

		& .mf-button-icon {
			opacity: 1;
			font-size: 1.1em;
		}
	}
}

/* Quieted with transparency, not a colour: a colour would survive the primary
   variant's inversion. */
.mf-button-icon {
	color: inherit;
	opacity: 0.75;
}