Reaction Bar

<div class="nuda-reaction-bar" role="group" aria-label="Reactions">
  <button type="button" class="nuda-reaction-bar__item is-active" aria-pressed="true">
    <span aria-hidden="true">👍</span><span class="nuda-reaction-bar__n">24</span>
  </button>
  <button type="button" class="nuda-reaction-bar__item" aria-pressed="false">
    <span aria-hidden="true">❤️</span><span class="nuda-reaction-bar__n">18</span>
  </button>
  <button type="button" class="nuda-reaction-bar__item" aria-pressed="false">
    <span aria-hidden="true">🔥</span><span class="nuda-reaction-bar__n">12</span>
  </button>
  <button type="button" class="nuda-reaction-bar__item" aria-pressed="false">
    <span aria-hidden="true">😂</span><span class="nuda-reaction-bar__n">9</span>
  </button>
  <button type="button" class="nuda-reaction-bar__item" aria-pressed="false">
    <span aria-hidden="true">😮</span><span class="nuda-reaction-bar__n">4</span>
  </button>
  <button type="button" class="nuda-reaction-bar__item" aria-pressed="false">
    <span aria-hidden="true">🎉</span><span class="nuda-reaction-bar__n">2</span>
  </button>
</div>

/* Reaction Bar
   Inline emoji + counts; active state uses accent color.
   Toggle .is-active and aria-pressed in JS. */

.nuda-reaction-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #0c0c10;
  border: 1px solid #1c1c22;
  border-radius: 12px;
}

.nuda-reaction-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  background: #111114;
  border: 1px solid #1c1c22;
  border-radius: 999px;
  color: #a0a0a8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: nuda-rbar-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nuda-reaction-bar__item:hover {
  background: #1c1c22;
  color: #fafafa;
  transform: translateY(-1px);
}

.nuda-reaction-bar__item.is-active {
  background: rgba(228, 255, 84, 0.12);
  border-color: #e4ff54;
  color: #e4ff54;
}

.nuda-reaction-bar__n { font-variant-numeric: tabular-nums; }

.nuda-reaction-bar__item:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

@keyframes nuda-rbar-in {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-reaction-bar__item { animation: none; transition: none; }
  .nuda-reaction-bar__item:hover { transform: none; }
}