.scf-reactions-wrap {
	margin: 24px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-align: center;
	background-color: transparent !important;
}

.scf-reactions-bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 28px;
	align-items: center;
	justify-content: center;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.scf-reactions-bar::-webkit-scrollbar {
	display: none;
}

.scf-reaction-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #f0f2f5 !important;
	background-color: #f0f2f5 !important;
	border: 2px solid transparent !important;
	border-radius: 20px !important;
	padding: 7px 14px !important;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 600;
	color: #65676b !important;
	transition: background .15s, border-color .15s, transform .15s;
	outline: none;
	box-shadow: none !important;
	text-decoration: none !important;
	-webkit-user-select: none;
	user-select: none;
	overflow: visible !important;
	position: relative;
}

.scf-reactions-wrap .scf-reaction-btn::before,
.scf-reactions-wrap .scf-reaction-btn::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

.scf-reaction-btn:hover {
	background: #e4e6eb !important;
	background-color: #e4e6eb !important;
	transform: scale(1.06);
}

.scf-reaction-btn:active {
	transform: scale(0.97);
}

.scf-reaction-btn.active {
	background: #e7f3ff !important;
	background-color: #e7f3ff !important;
	color: #1877f2 !important;
}

.scf-emoji {
	display: inline-flex;
	line-height: 1;
	transition: transform .2s cubic-bezier(.34,1.56,.64,1);
	position: relative;
	z-index: 10;
}

.scf-emoji svg {
	position: relative;
	z-index: 10;
}

.scf-emoji svg {
	width: 30px;
	height: 30px;
	display: block;
}

.scf-reaction-btn:hover .scf-emoji {
	transform: scale(1.3) translateY(-2px);
}

.scf-reaction-btn.active .scf-emoji {
	animation: scf-pop .25s ease;
}

@keyframes scf-pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.4); }
	100% { transform: scale(1); }
}

.scf-count {
	font-size: 13px;
	min-width: 10px;
	transition: opacity .15s;
}

.scf-count:empty {
	display: none;
}

.scf-reactions-total {
	margin: 8px 0 0;
	font-size: 13px;
	color: #65676b;
	text-align: center;
}

.scf-reactions-wrap.loading .scf-reaction-btn {
	pointer-events: none;
}

@media (max-width: 480px) {
	.scf-reactions-bar {
		gap: 14px;
	}
	.scf-reaction-btn {
		padding: 5px 8px !important;
		font-size: 12px !important;
	}
	.scf-emoji svg {
		width: 24px;
		height: 24px;
	}
}