/** @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 {
		border-color: $studio-woocommerce-purple-60;
		box-shadow: 0 0 2px rgba($studio-woocommerce-purple-60, 0.8);
	}

	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;
		margin-left: 4px;
		margin-top: 4px;
		background-color: $studio-white;
	}

	input[type='checkbox']:checked::before,
	.muriel-checkbox input[type='checkbox']:checked::before {
		font-size: 16px;
		color: $studio-white;
		content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($studio-white)}%27%2F%3E%3C%2Fsvg%3E');
		margin-left: -2px;
		margin-top: 0;
		height: 18px;
		width: 16px;
	}

	.muriel-checkbox input[type='checkbox']:checked::before {
		margin-left: 0;
		margin-top: 0;
		position: absolute;
		left: 1px;
		top: 4px;
	}

	.muriel-input-text input {
		min-height: auto;
	}

	.muriel-input-text.with-value input {
		top: 24px;
	}

	.muriel-checkbox .components-base-control__field {
		align-items: center;
		display: flex;
	}
}

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

		&:hover {
			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;
		}
	}
}