/* ==========================================================================
   MENU HOVERS - Button hover effects based on scroll state
   ========================================================================== */

@media screen and (min-width: 1026px) {

	/* Not scrolled - white background hover */
	body:not(.scrolled) header .btn--primary:is(:hover, :focus-visible)::after {
		background: var(--white) !important;
		transition-property: background, width;
		transition-duration: 0s, 0.4s;
	}

	body:not(.scrolled) header .btn--primary:is(:hover, :focus-visible) {
		color: var(--base) !important;
	}

	/* Scrolled - primary background */
	body.scrolled header .btn--primary {
		background: var(--primary) !important;
	}

	body.scrolled header .btn--primary:is(:hover, :focus-visible) {
		color: var(--base) !important;
	}

	header .btn--primary.btn--primary::after {
		background: white !important;
	}
}