.button {
	--icon-width: 32px;
	--gap: 8px;
	border-radius: 0;
	border: none;
	padding: 8px 16px;
	display: inline-flex;
	flex-flow: row;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	margin: 4px;
	cursor: pointer;
	color: var(--button-fg-color);

	&:hover {
		filter: brightness(1.1);
	}

	&[disabled] {
		opacity: 0.5;
		pointer-events: none;
	}

	svg * {
		fill: var(--button-fg-color) !important;
	}
}

.button--centered {
	span {
		text-align: center;
		margin-right: calc(var(--gap) + var(--icon-width));
	}
}

.button--color-accent1 {
	background-color: var(--color-brand-accent);
	--button-fg-color: var(--color-brand-text-on-accent);
}

.button--color-accent2 {
	background-color: var(--color-brand-accent2);
	--button-fg-color: var(--color-brand-text-on-accent2);
}