.mf-segmented {
	display: flex;
	gap: var(--mf-space-2);
	min-width: 0;
	font-family: var(--mf-font-mono);
}

/* Glyph and label centred together on the first line, the preview under both.
   Wrapped rather than columned, so the pair centres as one thing. */
.mf-segmented-option {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	/* Against the flex default of auto, or an option refuses to go narrower than its
	   own words and the whole band leaves the panel. */
	flex: 1 1 0;
	min-width: 0;
	gap: 0 var(--mf-space-2);
	padding: var(--mf-space-2);
	background: var(--mf-color-surface);
	border: var(--mf-border);
	color: var(--mf-color-text-muted);
	font: inherit;
	font-size: var(--mf-font-size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--mf-transition-fast), border-color var(--mf-transition-fast);

	&:hover {
		border-color: var(--mf-color-border-strong);
	}

	/* The chosen option, in the accent every control states a selection in. */
	&[aria-checked="true"] {
		border-color: var(--mf-color-accent);
		color: var(--mf-color-accent);
	}

	&:disabled {
		opacity: 0.4;
		cursor: default;
	}
}

.mf-segmented-icon {
	display: inline-flex;
}

/* One line or none: an option too narrow for its words gives them up group-wide
   (core/fit.js) rather than breaking onto a second row. */
.mf-segmented-label {
	min-width: 0;
}

/* Away, not clipped: the room is the point, and every option's aria-label and hover
   line still carry its words. */
.mf-segmented[data-mf-compact] .mf-segmented-label {
	display: none;
}

/* The caption is the option's live preview, at reading case: it shows a value, it
   does not shout a choice. On a line of its own, under the whole option. */
.mf-segmented-caption {
	flex: 0 0 100%;
	margin-top: var(--mf-space-1);
	text-align: center;
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-tiny);
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
}

/* Icon-only: the label stays for the screen reader, the glyph is the button. */
.mf-segmented[data-mf-variant="icons"] {
	& .mf-segmented-option {
		flex: 0 1 auto;
		padding: var(--mf-space-2) var(--mf-space-4);
	}

	& .mf-segmented-icon {
		font-size: 1.2em;
	}
}

/* Tiles: the glyph over the label rather than beside it, for a short offer that
   is chosen by its picture. */
.mf-segmented[data-mf-variant="tiles"] {
	& .mf-segmented-option {
		flex-direction: column;
		padding: var(--mf-space-4) var(--mf-space-3);
	}

	& .mf-segmented-icon {
		font-size: 1.4em;
	}
}