/**
 * Activity Reactions — styling.
 *
 * Everything is namespaced under .scr-reactions with scr- prefixed classes so it
 * never collides with the theme's own buttons. The buddyx theme styles activity
 * buttons aggressively (solid green background, fixed sizing, uppercase), so the
 * interactive elements below reset the fought properties with !important, and each
 * rule is also given an #buddypress-scoped variant so it out-specifies the theme's
 * own #buddypress button rules. The plain (unscoped) variant covers activity shown
 * in widgets outside the #buddypress wrapper.
 */

/* --- Layout ------------------------------------------------------------ */

/* The whole control is ONE rounded button matching the sibling activity buttons
   (Mark as Favorite / Delete): white, thin light-grey border, slight radius, ~37px tall.
   The tallies and the gray face sit inside it. A #buddypress variant + !important guards
   against any theme styling of the wrapper. */
.scr-reactions,
#buddypress .scr-reactions {
	box-sizing: border-box !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
	margin: 0 !important;
	padding: 6px 12px !important;
	min-height: 37px !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 4px !important;
	background: #ffffff !important;
	box-shadow: none !important;
	line-height: 1 !important;
}

.scr-reactions:hover,
#buddypress .scr-reactions:hover {
	background: #f6f7f8 !important;
}

/* Hide the control entirely when it has nothing to show (a logged-out view of an item
   with no reactions). !important so it beats the display rule above. */
.scr-reactions:empty,
#buddypress .scr-reactions:empty {
	display: none !important;
}

.scr-reactions.scr-busy {
	opacity: 0.6;
	pointer-events: none;
}

.scr-react-trigger-wrap {
	position: relative;
	display: inline-flex;
}

/* --- Trigger (a bare, muted GRAY face that opens the picker) ------------ */

/* No button chrome and no count — just the gray face. buddyx styles activity buttons
   aggressively, so reset with !important and a #buddypress-scoped variant. */
.scr-react-trigger,
#buddypress .scr-reactions .scr-react-trigger {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 2px 4px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
}

/* The whole control highlights on hover, so the face/segments have no separate hover
   background of their own — only the face brightens (below). */
.scr-react-trigger:hover,
#buddypress .scr-reactions .scr-react-trigger:hover {
	background: transparent !important;
}

/* The neutral face is a small inline SVG that inherits currentColor, so it renders in the
   same color as the sibling buttons' icons (change `color` here to pick a specific shade). */
.scr-react-face {
	display: inline-flex;
	align-items: center;
	color: inherit;
}

.scr-react-face svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* .scr-react-total is no longer rendered (counts live in the pills box). */

/* --- Popover: a vertical column --------------------------------------- */

/* position:fixed (top/left set by JS from the trigger's viewport rect) so the menu is never
   clipped by an activity card's overflow. Small 4px radius to match the who-reacted list. */
.scr-react-popover {
	position: fixed;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	min-width: 168px;
	padding: 6px;
	background: #ffffff;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
}

/* Honour the [hidden] attribute even if a theme rule would otherwise show it. */
.scr-react-popover[hidden] {
	display: none;
}

/* Column rows: emoji · label · count. No green, left-aligned, compact. */
.scr-react-option,
#buddypress .scr-reactions .scr-react-option {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 6px 8px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font-size: 13px !important;
	line-height: 1 !important;
	text-align: left !important;
	text-transform: none !important;
	cursor: pointer;
}

.scr-react-option:hover,
#buddypress .scr-reactions .scr-react-option:hover {
	background: #f2f3f5 !important;
}

/* The viewer's current choice. */
.scr-react-option.is-selected,
#buddypress .scr-reactions .scr-react-option.is-selected {
	background: #e3f0ff !important;
}

.scr-opt-emoji {
	font-size: 20px;
	line-height: 1;
}

.scr-opt-label {
	flex: 1 1 auto;
}

.scr-opt-count {
	font-weight: 600;
	font-size: 12px;
	opacity: 0.7;
}

/* --- Single "box" of per-type tallies (shown to everyone) -------------- */

/* The tallies sit inline INSIDE the outer button — no separate box chrome. This wrapper
   is also the positioning context for the reactor popover. */
.scr-pills {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

/* .scr-pills--filled (toggled from PHP + JS) now only gates VISIBILITY: the tallies row
   is hidden until the item has at least one reaction, so a reaction-less button is just
   the gray face. */
.scr-pills:not(.scr-pills--filled) {
	display: none;
}

/* A slight divider separating the tallies from the gray face — only when there are
   reactions to show (the box is hidden otherwise). */
.scr-pills--filled {
	border-right: 1px solid #e8e8e8;
	padding-right: 8px;
}

/* Each tally is a plain emoji+count segment INSIDE the box — no individual chrome.
   buddyx styles activity buttons aggressively, so reset with !important and a
   #buddypress-scoped variant. */
.scr-pill,
#buddypress .scr-reactions .scr-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 3px;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 1px 4px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	vertical-align: middle;
}

/* Interactive (logged-in) segments: subtle highlight on hover/focus (the who-reacted
   popover is the main affordance). */
button.scr-pill,
#buddypress .scr-reactions button.scr-pill {
	cursor: pointer;
}

button.scr-pill:hover,
#buddypress .scr-reactions button.scr-pill:hover {
	background: transparent !important;
}

button.scr-pill:focus-visible,
#buddypress .scr-reactions button.scr-pill:focus-visible {
	outline: 2px solid #1d76da !important;
	outline-offset: 1px;
}

/* Read-only (logged-out) segments: no pointer affordance. */
.scr-pill--readonly {
	cursor: default;
}

.scr-pill .scr-emoji {
	font-size: 13px;
}

.scr-pill .scr-count {
	font-weight: 600;
	font-size: 12px;
}

/* Honour [hidden] on a segment even if a theme rule would otherwise show it. */
.scr-pill[hidden],
#buddypress .scr-reactions .scr-pill[hidden] {
	display: none !important;
}

/* --- "Who reacted" popover (opened by clicking a pill) ----------------- */

/* position:fixed (top/left set by JS from the button's viewport rect) so it is never clipped by
   an activity card's overflow. */
.scr-reactors-people {
	position: fixed;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	min-width: 180px;
	max-height: 260px;
	overflow-y: auto;
	padding: 6px;
	background: #ffffff;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
}

.scr-reactors-people[hidden] {
	display: none;
}

/* Each reactor row: avatar + name, linking to the member's profile. No background/border
   of its own — reset the theme's link/button styling; compact height. */
.scr-reactor,
#buddypress .scr-reactors-people .scr-reactor {
	display: flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	padding: 3px 5px !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
}

.scr-reactor:hover,
#buddypress .scr-reactors-people .scr-reactor:hover {
	background: #f2f3f5 !important;
}

.scr-reactor-avatar {
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	object-fit: cover;
	flex: 0 0 auto;
}

.scr-reactor-name,
#buddypress .scr-reactors-people .scr-reactor-name {
	flex: 1 1 auto;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-align: left !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.scr-reactors-more,
.scr-reactors-empty {
	padding: 5px 6px;
	font-size: 12px;
	opacity: 0.7;
}