/**
 * Reactions — single heart/thumb "like" button + count.
 *
 * v2.16.16: every reaction state forced with !important to beat host-theme
 * button:hover / button:active rules that were leaking red bg through.
 *
 * @package Tobalt_Renginiai
 * @author  Tobalt — https://tobalt.lt
 */

.tr-reactions {
	all: initial !important;
	display: inline-flex !important;
	gap: 6px !important;
	margin-top: 10px !important;
	align-items: center !important;
	font-family: inherit !important;
	color: var(--tr-color-muted, currentColor) !important;
	line-height: 1 !important;
}

.tr-reactions .tr-reaction,
.tr-reactions .tr-reaction:hover,
.tr-reactions .tr-reaction:focus,
.tr-reactions .tr-reaction:focus-visible,
.tr-reactions .tr-reaction:active,
.tr-reactions .tr-reaction.is-pressed,
.tr-reactions .tr-reaction[aria-pressed="true"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 6px !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--tr-color-muted, currentColor) !important;
	font-family: inherit !important;
	font-size: 0.85em !important;
	line-height: 1 !important;
	cursor: pointer !important;
	user-select: none !important;
	box-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	text-decoration: none !important;
	transition: color 120ms ease, transform 120ms ease !important;
}

.tr-reactions .tr-reaction:focus-visible {
	outline: 2px solid #272D2D !important;
	outline-offset: 2px !important;
}
.tr-reactions .tr-reaction:not(:focus-visible) {
	outline: none !important;
}

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

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

/* SVG color drives the visual state. Default = muted via currentColor. */
.tr-reactions .tr-reaction svg {
	flex-shrink: 0 !important;
	display: inline-block !important;
	transition: transform 120ms ease, color 120ms ease !important;
}

/* Hover: only the SVG color shifts to #272D2D. NO bg change, NO red. */
.tr-reactions .tr-reaction:hover svg,
.tr-reactions .tr-reaction:focus-visible svg {
	color: #272D2D !important;
	transform: scale(1.1) !important;
}

/* Pressed: SVG color → #272D2D. fill="currentColor" in template fills the
 * thumb path at #272D2D so pressed = filled dark thumb, hover = outlined. */
.tr-reactions .tr-reaction.is-pressed svg,
.tr-reactions .tr-reaction[aria-pressed="true"] svg {
	color: #272D2D !important;
}

/* Count hidden until count > 0 (data-has-count="1" set server-side + by JS) */
.tr-reactions .tr-reaction .tr-reaction__count {
	display: none !important;
	font-variant-numeric: tabular-nums !important;
	font-weight: 600 !important;
	min-width: 1ch !important;
	text-align: center !important;
	color: var(--tr-color-muted, currentColor) !important;
}
.tr-reactions .tr-reaction .tr-reaction__count[data-has-count="1"] {
	display: inline !important;
}