/* The components/OptionList menu: headings, options and the cursor. The host
   above it — a picker's filter, the finder's query — sizes it in its own column. */
.mf-options {
	flex: 1 1 auto;
	min-height: 0;
	font-family: var(--mf-font-mono);
}

.mf-option-group {
	padding: var(--mf-space-2) var(--mf-space-2) var(--mf-space-1);
	color: var(--mf-option-color, var(--mf-color-text-muted));
	font-size: var(--mf-font-size-small);
	letter-spacing: var(--mf-track-label);
	text-transform: uppercase;
}

.mf-option {
	display: flex;
	align-items: baseline;
	gap: var(--mf-space-2);
	padding: var(--mf-space-1) var(--mf-space-2);
	color: var(--mf-color-text);
	font-size: var(--mf-font-size-small);
	cursor: pointer;

	/* A row is one of a list: it steps out of the crowd to say it is the value
	   held, and out of the page to say it is the one under the cursor. */
	opacity: 0.8;

	&[aria-selected="true"] {
		color: var(--mf-color-accent);
		opacity: 1;
	}

	/* After the selected rule, which it has to beat: same specificity. */
	&.is-active {
		background: var(--mf-color-accent);
		color: var(--mf-color-background);
		font-weight: bold;
		opacity: 1;

		.mf-option-icon,
		.mf-option-sub {
			color: inherit;
		}
	}

	&.is-disabled {
		color: var(--mf-color-text-muted);
		cursor: default;
	}
}

.mf-option-icon {
	flex: 0 0 auto;
	width: 1.5em;
	color: var(--mf-option-color, var(--mf-color-text-muted));
	text-align: center;
}

/* Never clipped: the label IS the row — what the option does. The sub line beside it is
   context, and gives way instead. */
.mf-option-label {
	flex: 0 0 auto;
	margin-right: var(--mf-space-2);
	/* Box-drawing prefixes in a label are alignment, not whitespace. */
	white-space: pre;
}

.mf-option-sub {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--mf-color-text-muted);
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mf-option-empty {
	padding: var(--mf-space-2);
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-small);
}