/*
 * Floating action buttons ("Request a Quote" / "Shop Now").
 *
 * Its own file so it never collides with the design work going on in style.css.
 * Enqueued from inc/custom-function.php (handle: uks-floating-buttons).
 *
 * The buttons are ordinary blocks, so their text, links and colours are set in
 * the editor - nothing here touches how they look, only where they sit and when
 * they appear. js/floating-buttons.js adds is-visible and is-suppressed.
 *
 * Setting it up on a page (Advanced > Additional CSS class(es)):
 *   uks-fab           the Group holding both buttons
 *   uks-fab-shop      the "Shop Now" button, so it opens the mega menu
 *   uks-fab-trigger   optional; the element they appear after. Without it the
 *                     banner (.main-banner-wrapper) is used.
 *
 * Not shown on mobile, per the brief.
 */

/*
 * The buttons are already placed by .right-side-buttons in style.css, which
 * fixes them to the middle of the right edge - with !important on every line,
 * transform included. So this only takes over the transform (to slide them in
 * and out) and the visibility, and has to use !important to get past it.
 *
 * The doubled .uks-fab.uks-fab raises specificity above .right-side-buttons so
 * the two !important rules are not left depending on file order.
 *
 * .right-side-buttons is matched as well: the home page group only carries
 * that class, and uks-fab is added to it by the script - which runs from the
 * footer, so until then the buttons would show in their style.css position
 * (a flash on mobile, where they are not meant to appear at all).
 */

@media (min-width: 992px) {

	.uks-fab.uks-fab,
	.right-side-buttons.right-side-buttons {
		--uks-fab-speed: 0.35s;

		/* Parked off the right hand edge until the trigger has been passed. */
		transform: translate(100%, -50%) !important;
		opacity: 0;
		visibility: hidden;
		transition:
			transform var(--uks-fab-speed) ease,
			opacity var(--uks-fab-speed) ease,
			visibility var(--uks-fab-speed);
	}

	.uks-fab.uks-fab.is-visible {
		transform: translate(0, -50%) !important;
		opacity: 1;
		visibility: visible;
	}

	/* A mega menu panel or the search overlay is open - get out of its way. */
	.uks-fab.uks-fab.is-suppressed {
		transform: translate(100%, -50%) !important;
		opacity: 0;
		visibility: hidden;
	}

	@media (prefers-reduced-motion: reduce) {
		.uks-fab.uks-fab,
		.right-side-buttons.right-side-buttons {
			transition: none;
		}
	}
}

/* Mobile does not get these at all. */
@media (max-width: 991px) {
	.uks-fab.uks-fab,
	.right-side-buttons.right-side-buttons {
		display: none !important;
	}
}