/**
 * Luxofans — acoes e reacoes do feed no mesmo universo visual de moedas, diamantes e molduras.
 *
 * A integracao funcional continua sendo a nativa do EasySocial. Esta folha troca somente a arte:
 * o sprite conserva a ordem/grade original das seis reacoes e os SVGs de acao ocupam os mesmos
 * 24px dos icones anteriores. Assim cliques, contadores, popbox e acessibilidade nao mudam.
 */

/* Sprite vertical: angry, happy, like, love, sad e wow, exatamente na ordem esperada pelo ES. */
#es .es-icon-reaction::before {
	background-image: url("icons/reactions.svg?v=20260908") !important;
}

/* Os SVGs antigos continuam no HTML como fallback, mas ficam ocultos quando esta folha carregou. */
#es .es-action-icon--like,
#es .es-action-icon--comment,
#es .es-action-icon--repost,
#es .es-action-icon--views {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex: 0 0 24px;
	height: 24px;
	width: 24px;
}

#es .es-action-icon--like {
	background-image: url("icons/action-like.svg?v=20260908");
}

#es .es-action-icon--comment {
	background-image: url("icons/action-comment.svg?v=20260908");
}

#es .es-action-icon--repost {
	background-image: url("icons/action-repost.svg?v=20260908");
}

#es .es-action-icon--views {
	background-image: url("icons/action-view.svg?v=20260908");
}

#es .es-action-icon--like > svg,
#es .es-action-icon--comment > svg,
#es .es-action-icon--repost > svg,
#es .es-action-icon--views > svg {
	display: none !important;
}

/* Depois de reagir, o emoji escolhido substitui o coracao, como ja acontecia no site. */
#es .es-reaction-option__link.is-active .es-action-icon--like {
	background-image: none;
}

/* Um brilho curto deixa a interacao com sensacao de item de jogo, sem animacao permanente. */
@media (prefers-reduced-motion: no-preference) {
	#es .es-action-icon--like,
	#es .es-action-icon--comment,
	#es .es-action-icon--repost,
	#es .es-action-icon--views,
	#es .es-icon-reaction {
		transition: filter .16s ease, transform .16s ease;
	}

	#es .es-reaction-option__link:hover .es-action-icon--like,
	#es .action-title-comments a:hover .es-action-icon--comment,
	#es .action-title-repost a:hover .es-action-icon--repost,
	#es .action-title-views:hover .es-action-icon--views,
	#es .es-reactions-pop__item:hover .es-icon-reaction {
		filter: brightness(1.12) drop-shadow(0 2px 4px rgba(126, 35, 230, .35));
		transform: translateY(-1px) scale(1.04);
	}
}