:root {
	--mf-tooltip-max-width: 32ch;
}

.mf-tooltip {
	position: fixed;
	left: 0;
	top: 0;
	z-index: var(--mf-z-tooltip);

	max-width: var(--mf-tooltip-max-width);
	padding: var(--mf-space-1) var(--mf-space-2);

	color: var(--mf-color-accent);

	font-family: var(--mf-font-mono);
	font-size: var(--mf-font-size-small);
	line-height: var(--mf-font-line-height-tight);
	white-space: pre-line;

	pointer-events: none;
	user-select: none;

	visibility: hidden;
	opacity: 0;
	transition: opacity var(--mf-transition-fast);

	&.is-shown {
		visibility: visible;
		opacity: 1;
	}

	/* No border or background of its own: both are the frame's paths, so the
	   shape lives in `platform/Tooltip/frame` alone. */
	.mf-tooltip-frame {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.mf-tooltip-text {
		position: relative;
	}

	.mf-tooltip-border {
		fill: var(--mf-color-surface);
		stroke: var(--mf-color-border-strong);
		stroke-width: var(--mf-border-width);
	}

	/* One L per corner, bright, over the outline it shares its edges with. */
	.mf-tooltip-brackets {
		fill: none;
		stroke: var(--mf-color-accent);
		stroke-width: var(--mf-border-width);
		stroke-linecap: square;
	}
}