/**
 * Reactions — 👍 / 👎 button + count styling.
 *
 * Scoped to .tr-reactions so it doesn't bleed into other plugin buttons.
 *
 * @package Tobalt_Renginiai
 * @author  Tobalt — https://tobalt.lt
 */

.tr-reactions {
	display: inline-flex;
	gap: 6px;
	margin-top: 10px;
	align-items: center;
	opacity: 0.7;
	transition: opacity 150ms ease;
}
.tr-reactions:hover,
.tr-reactions:focus-within {
	opacity: 1;
}

.tr-reactions .tr-reaction {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	background: transparent;
	color: var(--tr-color-muted, currentColor);
	font-size: 0.85em;
	line-height: 1;
	cursor: pointer;
	transition: color 120ms ease, transform 120ms ease;
	user-select: none;
}

.tr-reactions .tr-reaction svg {
	width: 14px;
	height: 14px;
}

/* Hide zero counts on initial render — reveal once visitor reacts. Keeps
 * cards uncluttered when nobody has engaged yet. */
.tr-reactions .tr-reaction__count:empty,
.tr-reactions .tr-reaction[data-direction="up"] .tr-reaction__count:not([data-shown="1"]) {
	/* Count rendering rule: data-shown attribute drives visibility; PHP sets
	 * it when count > 0. Both buttons follow same rule via the more general
	 * selector below. */
}
.tr-reactions .tr-reaction .tr-reaction__count {
	display: none;
}
.tr-reactions .tr-reaction .tr-reaction__count[data-has-count="1"] {
	display: inline;
}

.tr-reactions .tr-reaction:hover,
.tr-reactions .tr-reaction:focus-visible {
	color: var(--tr-color-accent, #dc2626);
}

.tr-reactions .tr-reaction:focus-visible {
	outline: 2px solid var(--tr-color-accent, #dc2626);
	outline-offset: 2px;
	border-radius: 4px;
}

.tr-reactions .tr-reaction:active {
	transform: scale(0.92);
}

.tr-reactions .tr-reaction[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.tr-reactions .tr-reaction.is-pressed,
.tr-reactions .tr-reaction[aria-pressed="true"] {
	color: var(--tr-color-accent, #dc2626);
}

.tr-reactions .tr-reaction svg {
	flex-shrink: 0;
	transition: transform 120ms ease;
}
.tr-reactions .tr-reaction:hover svg {
	transform: scale(1.1);
}

.tr-reactions .tr-reaction__count {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	min-width: 1ch;
	text-align: center;
}

/* Tile-context (bento overlay) — make sure reactions are legible on image bg. */
.tb-tile .tr-reactions {
	margin-top: 6px;
}
.tb-tile .tr-reaction {
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(255, 255, 255, 0.6);
}

/* Card-context (cards-scroller / event-grid / list / list-v2) defaults
 * pick up the card's body text color via `currentColor` — no overrides. */