/** @format */

// By using CSS variables, we can switch the spacing rhythm using a single media query.
:root {
	--large-gap: 40px;
	--main-gap: 24px;
}
@media (max-width: 1100px) {
	:root {
		--large-gap: 24px;
	}
}
@media (max-width: 782px) {
	:root {
		--large-gap: 16px;
		--main-gap: 16px;
	}
}

// Set up animation
@keyframes loading-fade {
	0% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.7;
	}
}

.woocommerce-layout {
	a:link,
	a:visited,
	.components-button.is-link {
		color: $woocommerce-500;
	}

	a:hover,
	a:active,
	a:focus,
	.components-button.is-link:hover,
	.components-button.is-link:active,
	.components-button.is-link:focus {
		color: $woocommerce-400;
	}

	a:focus {
		box-shadow: 0 0 0 1px $woocommerce-300, 0 0 2px 1px rgba($woocommerce-300, 0.8);
	}
}