.prx-reactions {
display: inline-flex;
gap: .4rem;
align-items: center;
flex-wrap: wrap;
user-select: none;
}
.prx-btn {
padding: .3rem .45rem;
border-radius: 9999px;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .4rem;
border: none;
color: #374151;
filter: grayscale(1);
opacity: .8;
transition: transform .12s ease, border-color .15s, box-shadow .15s, filter .15s, opacity .15s, color .15s;
}
.prx-btn:hover {
transform: scale(1.06);
}
.prx-btn .prx-icon {
display: inline-flex;
}
.prx-btn .prx-icon .fa-solid {
font-size: 16px;
line-height: 1;
}
.prx-btn .prx-count {
font-weight: 600;
} .prx-btn.active {
color: var(--prx-color, currentColor);
filter: none;
opacity: 1;
} @keyframes prx-pop {
0% {
transform: scale(1);
}
40% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
.prx-btn.prx-pulse {
animation: prx-pop .22s ease-out;
}
.prx-count.prx-bump {
animation: prx-pop .22s ease-out;
} .prx-mode-flyout {
position: relative;
display: inline-block;
}
.prx-mode-flyout .prx-trigger {
display: inline-flex;
align-items: center;
gap: .4rem;
border: 1px solid #ced5dc;
background: #f3f3f3;
;
padding: .35rem .6rem;
border-radius: 9999px;
cursor: pointer;
line-height: 1;
font-size: 14px;
color: var(--prx-color, inherit);
transition: transform .12s ease, border-color .15s, box-shadow .15s;
}
.prx-mode-flyout .prx-trigger:hover {
transform: scale(1.04);
border-color: #cbd5e1;
}
.prx-mode-flyout .prx-flyout{
position: absolute;
left: 0; bottom: 100%;
margin-bottom: .5rem;
display: flex;
gap: .4rem;
padding: .5rem .6rem;
background: #f3f3f3;
border: 1px solid #ced5dc;
border-radius: 9999px;
box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
z-index: 20; max-width: calc(100vw - 16px);
white-space: nowrap;
flex-wrap: nowrap;
justify-content: center; opacity: 0;
transform: translate(0%, 8px) scale(.98); pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
} @media (hover: hover) and (pointer: fine){
.prx-mode-flyout:hover .prx-flyout{
opacity: 1;
transform: translate(0%, 0) scale(1);
pointer-events: auto;
}
} .prx-mode-flyout.prx-open .prx-flyout{
opacity: 1;
transform: translate(0%, 0) scale(1);
pointer-events: auto;
}
.prx-reactions,
.prx-mode-flyout{ max-width: 100%; }
@media (max-width: 780px){
.prx-mode-flyout .prx-flyout{
border-radius: 24px;
justify-content: start;
flex-wrap: wrap;
}
} .prx-mode-flyout .prx-fly {
border: none;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: .35rem;
line-height: 1;
padding: .25rem .35rem;
border-radius: 9999px;
filter: grayscale(1);
opacity: .9;
transform: scale(1);
transition: transform .12s ease, filter .12s ease, opacity .12s ease, color .12s ease;
}
.prx-mode-flyout .prx-fly:hover {
filter: none;
opacity: 1;
transform: scale(1.06);
}
.prx-mode-flyout .prx-fly.active {
filter: none;
opacity: 1;
transform: scale(1.03);
color: var(--prx-color, currentColor);
}
.prx-mode-flyout .prx-fly .prx-icon .fa-solid {
font-size: 20px;
} .prx-mode-flyout .prx-fly .prx-icon {
display: inline-flex;
will-change: transform;
transform: translateY(0) scale(1);
}
.prx-mode-flyout.prx-open .prx-fly .prx-icon,
.prx-mode-flyout:hover .prx-fly .prx-icon {
animation: prx-breathe 2200ms ease-in-out infinite;
animation-delay: calc(var(--prx-i, 0) * 120ms);
}
.prx-mode-flyout .prx-fly:hover .prx-icon {
animation-play-state: paused;
transform: translateY(0) scale(1.06);
}
.prx-mode-flyout .prx-fly.active .prx-icon {
transform: translateY(0) scale(1.03);
}
@keyframes prx-breathe {
0% {
transform: translateY(0) scale(1.00);
}
25% {
transform: translateY(-1px)scale(1.02);
}
50% {
transform: translateY(0) scale(1.00);
}
75% {
transform: translateY(1px) scale(0.99);
}
100% {
transform: translateY(0) scale(1.00);
}
} .prx-mode-flyout::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: .5rem;
} .post-reaction-stats {
display: inline-flex;
align-items: center;
gap: .4rem;
}
.post-reaction-stats .prs-count {
font-weight: 600;
} .post-reaction-stats .prs-like i {
color: #2563eb;
}
.post-reaction-stats .prs-heart i {
color: #e11d48;
}
.post-reaction-stats .prs-angry i {
color: #ea580c;
}  html[data-bs-theme="dark"] .prx-btn {
color: var(--bs-card-color);  }
html[data-bs-theme="dark"] .prx-btn:hover { }
html[data-bs-theme="dark"] .prx-mode-flyout .prx-trigger {
background: var(--bs-body-bg); border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
color: var(--prx-color, --bs-card-color);
}
html[data-bs-theme="dark"] .prx-mode-flyout .prx-trigger:hover {
border-color: #3b4250;
}
html[data-bs-theme="dark"] .prx-mode-flyout .prx-flyout {
background: var(--bs-body-bg); border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; box-shadow: var(--bs-box-shadow) !important;
} html[data-bs-theme="dark"] .prx-mode-flyout .prx-fly {
color: var(--bs-card-color);
} html[data-bs-theme="dark"] .prx-mode-flyout .prx-fly.active {
color: var(--prx-color, #e5e5e5);
} html[data-bs-theme="dark"] .prx-btn:focus-visible,
html[data-bs-theme="dark"] .prx-mode-flyout .prx-trigger:focus-visible,
html[data-bs-theme="dark"] .prx-mode-flyout .prx-fly:focus-visible {
outline: 2px solid rgba(99, 161, 255, .6);
outline-offset: 2px;
border-radius: 9999px;
} html[data-bs-theme="dark"] .post-reaction-stats {
color: var(--bs-card-color);
} .prx-btn:focus-visible,
.prx-mode-flyout .prx-trigger:focus-visible,
.prx-mode-flyout .prx-fly:focus-visible {
outline: 2px solid rgba(59, 130, 246, .5);
outline-offset: 2px;
border-radius: 9999px;
} .prx-total-all {
display: inline-flex;
align-items: center;
gap: .35rem;
font-weight: 600;
color: var(--bs-body-color, #374151);
opacity: .9;
}
body[data-bs-theme="dark"] .prx-total-all {
color: #e5e7eb;
}
.prx-total-all i {
opacity: .9;
} .post-reaction-pile {
display: inline-flex;
align-items: center;
gap: .5rem; }
.prs-pile {
display: inline-flex;
align-items: center; }
.prs-pill {
width: 20px;
height: 20px;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--prx-pill-bg, #6b7280); color: #fff;  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
font-size: 10px;
line-height: 1; margin-left: -8px;
position: relative;
} .prs-pile .prs-pill:first-child {
margin-left: 0;
} .prs-pile .prs-pill {
z-index: 1;
}
.prs-pile .prs-pill+.prs-pill {
z-index: 2;
}
.prs-pile .prs-pill+.prs-pill+.prs-pill {
z-index: 3;
}  .prx-total-all {
display: inline-flex;
align-items: center;
font-weight: 600;
} .post-reaction-stack {
gap: .5rem; }
.prs-stack {
display: inline-flex;
align-items: center;
gap: .35rem; }
.prs-stack-item {
position: relative;
width: 25px;
height: 25px;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--prx-pill-bg, #6b7280);
color: #fff;
border: 2px solid var(--prx-pile-border, #fff);
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
font-size: 12px; line-height: 1;
}
.prs-stack-item i {
line-height: 1;
}
.prs-stack-item .prs-badge {
position: absolute;
right: -4px;
bottom: -4px;
min-width: 14px;
height: 14px;
padding: 0 3px;
border-radius: 9999px;
background: #111827; color: #fff;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff; }
.prx-total-all {
display: inline-flex;
align-items: center;
font-weight: 600;
} [data-bs-theme="dark"] .prs-stack-item {
border-color: #0b0b0b;
}
[data-bs-theme="dark"] .prs-stack-item .prs-badge {
background: #e5e7eb;
color: #111827;
border-color: #0b0b0b;
}
.prs-total-plain {
display: inline-flex;
align-items: center;
font-size: 0.85rem;
}
.fa,
.fa-brands,
.fa-classic,
.fa-regular,
.fa-sharp,
.fa-solid,
.fab,
.far,
.fas {
line-height: 1.5;
}