/*
 * Shared styles for components reused across multiple blog posts (currently:
 * anonymous per-post reactions). Linked from each post's <head> rather than
 * duplicated inline, so there's one place to update instead of one per post.
 *
 * Relies on each post's own inline <style> already defining --panel, --line,
 * --text, --muted, and --music on :root (every post uses the same token
 * names) — this file only needs those, not a full copy of them.
 */

.reactions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  opacity: 0;
  transition: opacity 0.2s;
}
.reactions.is-ready { opacity: 1; }
.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-variant-numeric: tabular-nums;
}
.reaction-pill .reaction-emoji { font-size: 15px; }
.reaction-pill:hover { border-color: rgba(236, 234, 242, 0.22); color: var(--text); }
.reaction-pill.is-active {
  background: rgba(192, 132, 252, 0.14);
  border-color: rgba(192, 132, 252, 0.45);
  color: var(--text);
}
.reaction-pill:disabled { cursor: default; opacity: 0.7; }
.reaction-pill:focus-visible { outline: 2px solid var(--music); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .reactions, .reaction-pill { transition: none; }
}
