/*
 * The site's standard buttons, set 2 (plan Dokument\05 Development\ui-controls, Magnus 2026-10-28).
 *
 * A plain <button>, or a link (or other element) with the class "button", is the secondary button: surface background, brand-blue border and text.
 * Roles are classes: btn-primary (filled brand blue, the one main action), btn-back (frameless, chevron from
 * mwlBackButton), btn-danger (red outline). btn-sm is the compact 26px size; buttons in table cells get it
 * by themselves. mwlButton's subclasses (mwlSaveButton, mwlDeleteButton, mwlBackButton ...) set the roles.
 *
 * Every selector sits in :where(), so these rules weigh as little as possible and a button a page draws
 * itself (close buttons, icon buttons) keeps its own look. All other buttons, the modern pages included,
 * use these rules (Magnus 2026-10-28: "All buttons should look the same").
 *
 * A button is a centred inline flexbox: an icon before the text gets the same space (gap) on every button,
 * and a button with only an icon keeps it centred. Icons need no margin or padding of their own.
 */

:where(button, .button) {
	background-color: var(--bg-neutral-1);
	border: 1px solid var(--border-brand);
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
	color: var(--text-brand);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-size: 1em;
	font-family: "Exo 2", "Helvetica Neue", Verdana, Arial, sans-serif;
	line-height: 30px;
	padding: 0 14px;
	margin: 2px;
	position: relative;
	text-align: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
}
/* The gap above spaces the icon. Many buttons were written with their own space on the icon (style='margin-right:7px'
   or 'padding-right:0.5em'), which would now double it; !important is needed to win over those inline styles.
   The icon takes the button's line height (Font Awesome sets 1), so a button with only an icon is as high as one
   with text, and a button that sets its own line height passes it on to its icon. */
:where(button, .button) > :where(i.fa, i[class*="fa-"]) {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	line-height: inherit !important;
}

/* Links that look like buttons: css_main colours every link (a, a:hover), which outweighs the :where() rules,
   so the link's colours are set again here with a little more weight */
a.button { color: var(--text-brand); text-decoration: none; }
a.button.btn-primary { color: var(--text-neutral-1); }
a.button.btn-danger { color: var(--text-danger-3); }
a.button.btn-back:hover { text-decoration: underline; }
:where(button:hover:enabled, .button:hover) {
	background-color: var(--bg-neutral-5);
}
:where(button:active:enabled, .button:active) {
	background-color: var(--bg-info-1);
}
:where(button, .button):where(:focus) {
	outline: 0;
}
:where(button, .button):where(:focus-visible) {
	outline: 2px solid var(--border-info-4);
	outline-offset: 2px;
}

/* Compact size: on request, and for every button in a table cell */
:where(.btn-sm, td button, td .button) {
	line-height: 24px;
	padding: 0 10px;
}

/* Primary: the one main action */
:where(button, .button):where(.btn-primary) {
	background-color: var(--bg-brand);
	border-color: var(--bg-brand);
	color: var(--text-neutral-1);
}
:where(button.btn-primary:hover:enabled, .button.btn-primary:hover) {
	background-color: var(--bg-brand-dark);
	border-color: var(--bg-brand-dark);
}

/* Back: frameless, the chevron comes from mwlBackButton */
:where(button, .button):where(.btn-back) {
	background-color: transparent;
	border-color: transparent;
	padding: 0 6px;
}
:where(button.btn-back:hover:enabled, .button.btn-back:hover) {
	background-color: transparent;
	text-decoration: underline;
}

/* Danger: delete, remove, reject */
:where(button, .button):where(.btn-danger) {
	border-color: var(--border-danger-3);
	color: var(--text-danger-3);
}
:where(button.btn-danger:hover:enabled, .button.btn-danger:hover) {
	background-color: var(--bg-danger-1);
}

/* Disabled, all roles: grey */
:where(button:disabled, .button:disabled) {
	background-color: var(--bg-neutral-8);
	border-color: var(--border-neutral-4);
	color: var(--text-neutral-6);
	cursor: not-allowed;
}