/* should use only colors where R == B == G */
:root.theme-greyscale {
	--primary: #f7f7f7;

	--text-on-fill: var(--bg-canvas);

	--bg-selected: #808080;
}

html.theme-greyscale .toolbar-button.selected:not(.deactivated) {
	background-color: var(--bg-accent);
	color: var(--ink-inverse);
}

html.theme-greyscale .toolbar-button.selected:not(.deactivated):hover {
	background-color: var(--bg-accent-hover);
}

html.theme-greyscale .context-button.selected:not(.deactivated) {
	background-color: var(--bg-accent);
	color: var(--text-on-fill);
}

html.theme-greyscale .context-button.selected:not(.deactivated):hover {
	background-color: var(--bg-accent-hover);
}

html.theme-greyscale #header-container #header #header-buttons .header-button.selected {
	background-color: var(--bg-accent);
	color: var(--ink-inverse);
}

/* the active state of this button is not saved in the server */
html.theme-greyscale #header-container #header #header-buttons .header-button-GREYSCALE_THEME {
	background-color: var(--bg-accent);
	color: var(--ink-inverse);
}

html.theme-greyscale #header-container #header #header-buttons .header-button-GREYSCALE_THEME:hover {
	background-color: var(--bg-accent-hover);
}

html.theme-greyscale #header-container #header #header-buttons .header-button.selected:hover {
	background-color: var(--bg-accent-hover);
}