/* WooDancer Wishlist — shared frontend CSS.
   These rules apply to every .woodancer-wl button on the page regardless of
   variant (standalone BD element, VC after-button slot, shortcode). The
   per-element default.css files only contain *additional* layout rules for
   their specific element wrapper; the icon stack + crossfade live here so
   they're always loaded once-only when wishlist-engine.js is enqueued. */

.woodancer-wl {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	cursor: pointer;
	box-sizing: border-box;
	color: inherit;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
.woodancer-wl:disabled {
	cursor: not-allowed;
}

/* Icon stack — both icons share the same grid cell, crossfade via opacity. */
.woodancer-wl__icons {
	display: inline-grid;
	grid-template-areas: "stack";
	place-items: center;
}
.woodancer-wl__icons > * { grid-area: stack; }

.woodancer-wl__icon {
	display: inline-grid;
	place-items: center;
	width: 1em;
	height: 1em;
	line-height: 1;
}
.woodancer-wl__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.woodancer-wl__icon--idle,
.woodancer-wl__icon--active {
	transition: opacity 180ms ease;
}
.woodancer-wl[data-state="in"]  .woodancer-wl__icon--idle   { opacity: 0; }
.woodancer-wl[data-state="in"]  .woodancer-wl__icon--active { opacity: 1; }
.woodancer-wl[data-state="out"] .woodancer-wl__icon--idle   { opacity: 1; }
.woodancer-wl[data-state="out"] .woodancer-wl__icon--active { opacity: 0; }

/* Label crossfade. */
.woodancer-wl__label--active { display: none; }
.woodancer-wl[data-state="in"]  .woodancer-wl__label--idle   { display: none; }
.woodancer-wl[data-state="in"]  .woodancer-wl__label--active { display: inline; }

/* Loading state — engine adds [data-loading="1"] during AJAX. */
.woodancer-wl[data-loading="1"] { opacity: 0.6; pointer-events: none; }