/* Shared interaction layer for Atomic and legacy Elementor buttons. */
:root {
	--ges-button-lift: -2px;
	--ges-button-shadow-hover: 0 8px 18px rgb(20 25 26 / 14%);
	--ges-button-shadow-active: 0 3px 8px rgb(20 25 26 / 10%);
	--ges-button-focus-ring: var(--teal-tint, var(--ges-teal-tint, #97c4cc));
	--ges-button-motion-duration: 180ms;
}

:where(.elementor .button, .elementor .elementor-button) {
	transition:
		transform var(--ges-button-motion-duration) ease,
		box-shadow var(--ges-button-motion-duration) ease,
		background-color var(--ges-button-motion-duration) ease,
		color var(--ges-button-motion-duration) ease;
}

:where(.elementor .button, .elementor .elementor-button):hover,
:where(.elementor .button, .elementor .elementor-button):focus-visible {
	box-shadow: var(--ges-button-shadow-hover);
	transform: translateY(var(--ges-button-lift));
}

:where(.elementor .button, .elementor .elementor-button):focus-visible {
	outline: 3px solid var(--ges-button-focus-ring);
	outline-offset: 3px;
}

:where(.elementor .button, .elementor .elementor-button):active {
	box-shadow: var(--ges-button-shadow-active);
	transform: translateY(0);
}

/* Filled interaction state for the outlined variant on dark surfaces. */
.elementor .button.button--secondary-on-dark:hover,
.elementor .button.button--secondary-on-dark:focus-visible {
	border-color: var(--white, var(--ges-white, #fff));
	background: var(--white, var(--ges-white, #fff));
	color: var(--ink, var(--ges-ink, #14191a));
}

@media (prefers-reduced-motion: reduce) {
	:where(.elementor .button, .elementor .elementor-button) {
		transition: none;
	}

	:where(.elementor .button, .elementor .elementor-button):hover,
	:where(.elementor .button, .elementor .elementor-button):focus-visible,
	:where(.elementor .button, .elementor .elementor-button):active {
		transform: none;
	}
}