/** @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: 960px) {
	: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.components-button.is-button {
		color: $white;
	}

	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);
	}

	.components-button.is-button.is-primary {
		color: $white;

		&:not(:disabled) {
			&:hover,
			&:active,
			&:focus {
				color: $white;
			}
		}
	}
}