/**
 * The button component.
 *
 * Colour, border, radius, padding and type come from theme.json's
 * styles.elements.button — core emits that unlayered, so it is the only place
 * a button's appearance can be set once and reach both a core Button block and
 * this theme's own markup. Everything here is what theme.json cannot express,
 * and nothing here fights it.
 *
 * `.wp-element-button` is core's class for "this is a button"; `.hauto-button`
 * is added on top where the markup is ours and may carry an icon.
 *
 * Hover is a colour change and nothing else — see DESIGN.md.
 */

@layer components {
	.wp-element-button {
		transition:
			background-color 140ms ease-out,
			border-color 140ms ease-out,
			color 140ms ease-out,
			transform 140ms ease-in-out,
			filter 140ms ease-in-out;

		&:hover {
			filter: brightness(1.1);
			transform: scale(1.02);
		}
	}

	.wp-element-button:not(.has-background, .is-style-outline > *),
	.wp-element-button.has-primary-background-color {
		/* text-shadow: var(--wp--custom--button--text-shadow); */
	}

	.hauto-button {
		display: inline-flex;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
		justify-content: center;
		text-decoration: none;

		& .hauto-icon {
			opacity: 1;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.wp-element-button {
			transition: none;
		}
	}
}