/* One look for all three fields: a caption above a control. */
.mf-field {
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-1);
	min-width: 0;
	font-family: var(--mf-font-mono);
}

.mf-field-label {
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-small);
	letter-spacing: var(--mf-track-label);
	text-transform: uppercase;
}

.mf-field-control {
	min-width: 0;
	padding: var(--mf-space-1) var(--mf-space-2);
	background: var(--mf-color-background);
	border: var(--mf-border);
	color: var(--mf-color-text);
	font: inherit;

	&:focus {
		border-color: var(--mf-color-border-strong);
		outline: none;
	}

	&::placeholder {
		color: var(--mf-color-text-muted);
	}

	&:read-only,
	&:disabled {
		background: var(--mf-color-surface);
		color: var(--mf-color-text-muted);
	}

	&:disabled {
		cursor: not-allowed;
	}
}

textarea.mf-field-control {
	line-height: var(--mf-font-line-height);
}