:where(.btn,:where(a,button,input).button) {
	border-radius: 4px;
	border: none;
	&:not([hidden]) {
		display: inline-flex;
		align-items: center;
	}
	place-content: center;
	// vertical-align: top;
	align-items: flex-start;
	gap: .4em;
	font-size: 1rem;
	line-height: 1.8;
	text-decoration: none;
	transition-property: border, background, color;
	transition-duration: .15s;
	transition-timing-function: ease-in-out;
	cursor: pointer;

	&:has(:where(.dashicons,.icon)) {
		align-items: center;
		justify-content: flex-start;
	}

	// Only set when we're sure it's a major button of ours
	&:where(.btn,.primary,.button-primary,.secondary,.button-secondary) {
		padding: 0.4rem 1rem;
		min-width: 130px;
		min-height: 42px;
	}

	&:where(.primary,.button-primary) {
		// Use both colour and image for transition
		background-color: var(--color-primary);
		// background-image: var(--primary-gradient);
		color: var(--color-light);
		&:where(:hover,:focus):not([disabled]) {
			background: var(--color-light);
			color: var(--color-primary);
			outline: 2px solid var(--color-primary);
		}
	}
	&:where(.alt-bg,.secondary,.button-secondary,:not(.primary,.button-primary)) {
		background-color: var(--color-secondary);
		color: var(--color-light);
		font-size: 0.9rem;
		line-height: 2;
		&:where(:hover,:focus):not([disabled]) {
			background: var(--color-light);
			color: var(--color-secondary);
			outline: 2px solid var(--color-secondary);
		}
	}
	&:where(.disabled,[disabled]) {
		cursor: not-allowed;
		opacity: 0.65;
	}
	+ :where(.btn,.button) {
		margin-left: 0.5rem;
	}
}