/* FluentBoards Emoji — reaction bar styling */

/* FluentBoards 2.x has no comment footer row, so the bar is appended as the
   card's last child. The card body is indented by the avatar gutter (28px),
   so match it or the bar hangs left of the comment text. */
.fbs_comment_card__item > .fbe-bar {
	margin-left: 28px;
}

.fbe-bar {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.fbe-bar.is-pending {
	opacity: 0.6;
	pointer-events: none;
}

.fbe-btn {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	min-height: 24px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 14px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	color: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.fbe-btn:hover {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.08);
}

.fbe-btn.has-count {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.08);
	padding: 2px 9px;
}

.fbe-btn.is-reacted {
	background: rgba(33, 150, 243, 0.12);
	border-color: rgba(33, 150, 243, 0.45);
}

.fbe-btn.is-reacted:hover {
	background: rgba(33, 150, 243, 0.18);
}

.fbe-char {
	font-size: 15px;
	line-height: 1;
}

.fbe-count {
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.65);
	min-width: 10px;
	text-align: center;
}

.fbe-btn.is-reacted .fbe-count {
	color: #1565c0;
}

/* Fade-in zero-state buttons so they don't visually clutter unreacted comments */
.fbe-btn:not(.has-count) {
	opacity: 0.55;
}

.fbe-btn:not(.has-count):hover,
.fbe-bar:hover .fbe-btn:not(.has-count) {
	opacity: 1;
}