/* quick-edit — the pencil after a text block's last word, and the small editor
   it opens (scripts/quick-edit.js, services/quick-edit.php). Editors only.
   Basic structure for now; the look is still to be designed. */

.quick-edit {
	margin-inline-start: 0.25em;
	color: var(--ink-auxiliary);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		color: var(--ink-primary);
	}
}

.quick-edit-panel {
	display: grid;
	gap: var(--space-small);
	margin-block: var(--space-medium);

	.ProseMirror {
		padding: var(--space-small);
		border: 1px solid var(--stroke-primary);
		background-color: var(--fill-primary);

		&:focus {
			outline: 2px solid var(--stroke-primary);
		}
	}

	.problem {
		color: var(--ink-error);
	}
}