/** @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: $studio-pink;
	}

	a.components-button.is-button {
		color: $studio-white;
	}

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

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

	.components-button.is-button.is-primary {
		color: $studio-white;
		box-shadow: none;

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

	.components-button.is-button.is-default:not(.is-primary) {
		color: $gray-text;
		border-color: $button-border;
		background: $button;
		box-shadow: none;

		&:not(:disabled) {
			&:hover,
			&:active,
			&:focus {
				color: $gray-text;
				background: $button-hover;
				border-color: $button-hover-border;
			}
		}
	}

	.components-button.is-default:disabled:not(.is-primary) {
		color: $button-disabled;
		border-color: $button-disabled-border;
		background: $button;
		&:hover,
		&:active,
		&:focus {
			color: $button-disabled;
			border-color: $button-disabled-border;
			background: $button;
		}
	}

	input:focus,
	select:focus,
	button:focus {
		color: $core-grey-dark-700;
		border-color: $studio-woocommerce-purple-60;
		box-shadow: 0 0 2px rgba($studio-woocommerce-purple-60, 0.8);
	}

	select:hover {
		color: $core-grey-dark-700;
	}

	input[type='checkbox'] {
		border-radius: 3px;
	}

	input[type='checkbox'],
	input[type='radio'] {
		width: 18px;
		height: 18px;
		min-width: 18px;
		border: 2px solid $studio-gray-50;

		&:focus {
			border-color: $studio-woocommerce-purple-60;
			box-shadow: 0 0 0 1px $studio-woocommerce-purple-60,
				0 0 2px 1px rgba($studio-woocommerce-purple-60, 0.8);
		}
	}

	input[type='checkbox']:checked,
	input[type='radio']:checked {
		background-color: $studio-woocommerce-purple-60;
		border-color: $studio-woocommerce-purple-60;
	}

	input[type='checkbox']:focus:checked {
		border: 2px solid $studio-woocommerce-purple-60;
	}

	input[type='radio']:checked::before {
		font-size: 18px;
		background-color: $studio-white;
	}

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

body.woocommerce-page {
	.components-button.is-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']):not(.is-default):hover {
			color: $studio-white;
		}
	}
}