/**
 * Wishlist button: .mk-wishlist-button (templates/components/wishlist-button.php).
 *
 * Both hearts are stacked in the centre; aria-pressed="true" fades the outline
 * out and pops the solid heart in. Sizes per breakpoint: theme.json
 * `custom.wishlistButton.{mobile,tablet,desktop}` (48rem / 64rem =
 * `custom.breakpoint.{tablet,desktop}`).
 */

.mk-wishlist-button {
	--mk-wishlist-size: var(--wp--custom--wishlist-button--mobile--size);
	--mk-wishlist-icon-size: var(
		--wp--custom--wishlist-button--mobile--icon-size
	);

	display: inline-grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	inline-size: var(--mk-wishlist-size);
	block-size: var(--mk-wishlist-size);
	margin: 0;
	padding: var(--wp--custom--wishlist-button--padding);
	border: 0;
	border-radius: var(--wp--custom--wishlist-button--radius);
	background-color: var(--wp--custom--color--surface--overlay);
	color: var(--wp--custom--color--text--primary);
	cursor: pointer;
}

@media (min-width: 48rem) {
	.mk-wishlist-button {
		--mk-wishlist-size: var(--wp--custom--wishlist-button--tablet--size);
		--mk-wishlist-icon-size: var(
			--wp--custom--wishlist-button--tablet--icon-size
		);
	}
}

@media (min-width: 64rem) {
	.mk-wishlist-button {
		--mk-wishlist-size: var(--wp--custom--wishlist-button--desktop--size);
		--mk-wishlist-icon-size: var(
			--wp--custom--wishlist-button--desktop--icon-size
		);
	}
}

/* Both icons share the one grid cell. */
.mk-wishlist-button__icon {
	display: block;
	grid-area: 1 / 1;
	inline-size: var(--mk-wishlist-icon-size);
	block-size: var(--mk-wishlist-icon-size);
	transition-property: opacity, transform;
	transition-duration: var(--wp--custom--motion--duration--fast);
	transition-timing-function: var(--wp--custom--motion--easing--standard);
}

.mk-wishlist-button__icon .mk-icon {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.mk-wishlist-button__icon--on {
	color: var(--wp--custom--color--interactive--selected);
	opacity: 0;
	transform: scale(0.4);
}

.mk-wishlist-button[aria-pressed="true"] .mk-wishlist-button__icon--off {
	opacity: 0;
	transform: scale(0.6);
}

.mk-wishlist-button[aria-pressed="true"] .mk-wishlist-button__icon--on {
	opacity: 1;
	transform: none;
	transition-duration: var(--wp--custom--motion--duration--base);
	transition-timing-function: var(--wp--custom--motion--easing--emphasized);
}

.mk-wishlist-button:focus {
	outline-style: none;
}

.mk-wishlist-button:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

@media (prefers-reduced-motion: reduce) {
	.mk-wishlist-button__icon {
		transition: none;
	}
}