/* Restored from v1.1.5.180 in v1.1.5.282: canonical post/feed style baseline. */
.reactions-daily-limit { display: none; }
.reactions-widget {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.reactions-compact {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: var(--n-r-pill);
background: transparent;
cursor: pointer;
user-select: none;
color: var(--n-text-mute);
transition: background var(--n-dur-base) var(--n-ease),
color var(--n-dur-base) var(--n-ease);
}
.reactions-compact:hover:not([aria-disabled="true"]) {
background: var(--n-bg-hover);
color: var(--n-text);
}
.reactions-compact[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
}
.reactions-add-btn,
.reactions-summary {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: var(--n-w-med);
color: inherit;
}
.reactions-add-btn--icon-only {
gap: 0;
}
.reactions-add-btn--icon-only .r-icon {
font-size: 1.15rem;
}
.reactions-widget[data-my-reaction]:not([data-my-reaction=""]) .reactions-compact {
color: var(--n-accent);
}
.r-icon {
font-style: normal;
line-height: 1;
font-size: 16px;
}
.r-text {
font-variant-numeric: tabular-nums;
}
.reactions-expanded {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
display: flex;
align-items: center;
gap: 4px;
padding: 6px;
max-width: calc(100vw - 32px);
background: var(--n-bg-2);
border: 0;
border-radius: var(--n-r-pill);
box-shadow: var(--n-sh-md);
z-index: var(--n-z-popover);
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(6px) scale(.94);
transform-origin: bottom center;
transition: opacity var(--n-dur-base) var(--n-ease),
transform var(--n-dur-base) var(--n-ease-spring);
}
.reactions-expanded.open {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
}
.reaction-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
border-radius: var(--n-r-sm);
cursor: pointer;
padding: 6px 8px;
margin: 0 -2px;
font-size: 1rem;
line-height: 1;
color: var(--n-text-mute);
position: relative;
transition: color var(--n-dur-base) var(--n-ease),
background var(--n-dur-base) var(--n-ease);
}
.reaction-btn:hover:not([disabled]) {
color: var(--n-accent);
background: var(--n-accent-soft);
}
.reaction-btn:active:not([disabled]) {
transform: scale(.95);
}
.reaction-btn.active {
color: var(--n-accent);
}
.reaction-btn[disabled] {
opacity: .4;
cursor: not-allowed;
}
.reaction-btn:focus-visible {
outline: none;
box-shadow: var(--n-focus-ring);
}
.r-cnt {
font-size: 11px;
font-weight: var(--n-w-bold);
color: var(--n-text-mute);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.reaction-btn.active .r-cnt {
color: var(--n-accent);
}
/* v1.1.5.290 — keep reactions from stretching mobile post rows. */
.reactions-widget,
.reactions-compact,
.reactions-summary{
max-width:100%;
min-width:0;
}
.reactions-summary{
flex-wrap:wrap;
}
@media (max-width:760px){
.reactions-widget{
flex-shrink:1;
}
.reactions-expanded{
left:0;
right:auto;
max-width:calc(100vw - 32px);
overflow-x:auto;
transform:translateY(6px) scale(.94);
}
.reactions-expanded.open{
transform:translateY(0) scale(1);
}
}