@layer base {
	/* .btn/.cbi-button are interchangeable in LuCI markup. Paint (box, fill, radius) is
	 * theme/55-buttons.css's; --on-color stays here because base/95-luci.css masks the spinner
	 * glyph with it, so it must track the variant regardless of layer. */
	.btn,
	.cbi-button {
		--on-color: var(--fs-text);

		cursor: pointer;
		font-size: var(--fs-type);
		white-space: pre;
	}

	/* border-color: theme/60-inputs.css — absorbed. */
	.cbi-input-invalid,
	.cbi-input-invalid.cbi-dropdown:not(.btn):not(.cbi-button),
	.cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
	.cbi-value-error input {
		color: var(--fs-danger);
	}

	/* --on-color only: docs/css.md "Buttons: --on-color survives the absorption into theme". */
	.cbi-button-positive,
	.cbi-button-fieldadd,
	.cbi-button-add,
	.cbi-button-save {
		--on-color: var(--fs-good);
	}

	.btn.primary,
	.cbi-button-action,
	.cbi-button-apply,
	.cbi-button-reload,
	.cbi-button-edit {
		--on-color: var(--fs-accent);
	}

	.cbi-button-negative,
	.cbi-section-remove .cbi-button,
	.cbi-button-reset,
	.cbi-button-remove {
		--on-color: var(--fs-danger);
	}

	/* Not a clearfix — flex container, nothing floats: docs/css.md "Buttons: the flex clearfix,
	 * and why float is dead on .cbi-page-actions". */
	.cbi-page-actions::after {
		display: table;
		content: "";
		clear: both;
	}

	.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
		margin-inline-end: var(--fs-space-1);
	}

	/* fills/borders absorbed (theme/55-buttons.css); Save/Apply's --on-color is re-set there too
	 * regardless of layer, so no base copy is needed for that pair. */
	.btn.primary,
	.cbi-button-action.important,
	.cbi-section-actions .cbi-button-edit {
		--on-color: var(--fs-on-accent);
	}

	.cbi-button-positive.important {
		--on-color: var(--fs-on-good);
	}

	.cbi-button-negative.important {
		--on-color: var(--fs-on-danger);
	}
}