// 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 {
	select:hover {
		color: $gray-900;
	}

	select.components-select-control__input {
		max-width: 100%;
		line-height: 1;
	}
}

body.woocommerce-page {
	.components-button.is-primary {
		color: $studio-white;

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

	.components-snackbar .components-button.is-tertiary {
		color: $studio-white;

		&:not(:disabled):not([aria-disabled='true']):hover {
			color: $studio-white;
		}
	}
}