/**
 * Per-photo like button in the gallery lightbox. See lib/photo-likes.php.
 *
 * The button is a PhotoSwipe UI element, so it inherits .pswp__button sizing and
 * hover behaviour; this only adds the heart, the count beside it, and the liked
 * state. Kept narrow on purpose - restyling the toolbar is the plugin's business.
 *
 * Colour, type and timing come from css/tokens.css, declared as a dependency of
 * this stylesheet in lib/photo-likes.php. The two exceptions are commented where
 * they occur: the icon's white and its shadow are matched to PhotoSwipe's own
 * toolbar icons rather than to the site palette, because the button has to look
 * like the buttons beside it.
 */

/* The :hover/:active/:focus variants are not decoration. The plugin ships
   `.pswp--ui-visible .pswp__button:hover { padding: 0 }` (and :active/:focus);
   without restating the padding the button reflows the instant the pointer
   touches it - it narrows by 24px and the heart jumps sideways.
   The leading `.pswp` is there to win on specificity (0,4,0 against their 0,3,0)
   rather than on stylesheet order, which is not ours to rely on. */
.pswp__button.otr-like,
.pswp .pswp__button.otr-like:hover,
.pswp .pswp__button.otr-like:active,
.pswp .pswp__button.otr-like:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-width: 50px;
	padding: 0 12px;
}

/* PhotoSwipe sets display on its buttons, so the hidden state needs to win. */
.pswp__button.otr-like[hidden] {
	display: none !important;
}

.otr-like__icn {
	/* Belt and braces: PhotoSwipe's own icon class is absolutely positioned, and
	   this must stay in flow for the button to size around it. */
	position: static;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	fill: none;
	/* Explicitly white, not currentColor: .pswp__button inherits a black text
	   colour, which on the black toolbar renders the heart invisible. The shadow
	   stands in for the one PhotoSwipe's own icons get from pswp__icn-shadow. */
	stroke: #fff;
	stroke-width: 2;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 1px var(--otr-scrim-soft));
	transition: fill var(--otr-transition), stroke var(--otr-transition);
}

.otr-like__count {
	/* A fixed, even width keeps the button's total width a whole number, which keeps
	   the heart on whole pixels. A fractional glyph position blurs both edges, and
	   an unevenly fractional one makes the solid heart look tilted. */
	min-width: 14px;
	text-align: left;
	font-size: var(--otr-size-small);
	text-shadow: 0 1px 1px var(--otr-scrim-soft);
	font-weight: var(--otr-weight-bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	/* Matched to PhotoSwipe's --pswp-icon-color, not to --otr-text: the count sits
	   in the plugin's toolbar and should track the icons next to it. */
	color: #fff;
}

.otr-like__count:empty {
	display: none;
}

/* Crisper edges on the solid state at toolbar size. */
.otr-like__icn {
	shape-rendering: geometricPrecision;
}

/* Liked: colour only. A transform here would resize the glyph to a fractional
   pixel height and make it rasterise lopsidedly, which looks like a tilt. */
.otr-like--on .otr-like__icn {
	fill: var(--otr-like);
	stroke: var(--otr-like);
}

.otr-like--on .otr-like__count {
	color: var(--otr-like);
}

.otr-like--failed .otr-like__icn {
	opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
	.otr-like__icn {
		transition: none;
	}
}