/* SHARED across kapps — edit anywhere; on push it propagates to the others. Watch list: _kshared/manifest.json */
/* <format-toolbar> — the shared rich-text toolbar (components/format-toolbar.js).

   Only the row and the buttons live here: the chrome that ties a toolbar to the
   field below it (a shared border, squared-off corners) differs per app, so each
   app adds that in its own stylesheet. The element is the row itself — there is
   no wrapper inside it to hang the grid on. */
format-toolbar {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-2xs);

	& .fmt-btn {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		/* Fixed-size icon button: the base `button` padding in buttons.css is sized
		   for a text label and would eat this 34px box (see icon-buttons.test.js). */
		padding: 0;
		border: 0;
		border-radius: var(--radius-small, 8px);
		background: transparent;
		color: var(--text-dim);
		font: var(--font-body-large-regular);
		cursor: pointer;

		/* The lettered buttons ARE their icon, so they carry the format they apply.
		   In a serif, though, whatever the app's body font is: an oblique "I" with
		   no crossbars is a slash, which is exactly what the italic button turned
		   into when knote switched its body face to Cairo. */
		& b, & i, & u {
			font-family: Georgia, "Times New Roman", serif;
			font-size: 1.05rem;
		}

		&:hover { background: var(--surface-3); color: var(--text); }
		&:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
		&.on { background: var(--color-primary); color: #fff; }
	}
}