.etno-icon-button--heart {
	--etno-icon-default: url("../icons/heart-outline.svg");
	--etno-icon-active: url("../icons/heart-filled.svg");
}

.etno-icon-button--user,
.etno-header .wp-block-woocommerce-customer-account a {
	--etno-icon-default: url("../icons/account-outline.svg");
	--etno-icon-active: url("../icons/account-filled.svg");
}

.etno-header .wc-block-mini-cart__button {
	--etno-icon-default: url("../icons/bag-outline.svg");
	--etno-icon-active: url("../icons/bag-filled.svg");
}

:is(.etno-icon-button--heart, .etno-icon-button--user),
.etno-header :is(.wp-block-woocommerce-customer-account a, .wc-block-mini-cart__button) {
	position: relative;
	--etno-icon-state: var(--etno-icon-default);
}

:is(.etno-icon-button--heart, .etno-icon-button--user) svg,
.etno-header .wp-block-woocommerce-customer-account svg,
.etno-header .wc-block-mini-cart__icon {
	visibility: hidden;
}

:is(.etno-icon-button--heart, .etno-icon-button--user)::before,
.etno-header .wp-block-woocommerce-customer-account a::before,
.etno-header .wc-block-mini-cart__button::before {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	content: "";
	background-color: currentColor;
	-webkit-mask: var(--etno-icon-state) center / contain no-repeat;
	mask: var(--etno-icon-state) center / contain no-repeat;
	pointer-events: none;
}

.etno-header .wc-block-mini-cart__button::before {
	left: 0.15rem;
	top: 50%;
	transform: translateY(-50%);
}

:is(.etno-icon-button--heart, .etno-icon-button--user):is(:focus-visible, :active, [aria-pressed="true"], [aria-current="page"], .is-active),
.etno-header .wp-block-woocommerce-customer-account a:is(:focus-visible, :active, [aria-current="page"]),
.etno-header .wc-block-mini-cart__button:is(:focus-visible, :active, [aria-expanded="true"]) {
	--etno-icon-state: var(--etno-icon-active);
}

@media (hover: hover) {
	:is(.etno-icon-button--heart, .etno-icon-button--user):hover,
	.etno-header .wp-block-woocommerce-customer-account a:hover,
	.etno-header .wc-block-mini-cart__button:hover {
		--etno-icon-state: var(--etno-icon-active);
	}
}