/*
 * reactions.css — subset of sosw-blog-kit src/blog-kit.css @ 543502ac5e7acc90c610acd2db2e585e7c464787:
 * the CSS variables used by the reactions widget + the "reactions widget" section, verbatim.
 * Site-specific overrides live in src/styles/global.css (.post-reactions).
 */

:root {
  --bk-accent: #2563eb;
  --bk-text: inherit;
  --bk-muted: #6b7280;
  --bk-radius: 6px;
  --bk-rating-fill: var(--bk-accent);
  --bk-rating-track: #e5e7eb;
}

/* ---------- reactions widget ---------- */

.bk-reactions {
  margin: 1rem 0;
}

.bk-reactions-rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.bk-rating-bar {
  flex: 0 0 10rem;
  height: 0.6rem;
  background: var(--bk-rating-track);
  border-radius: 999px;
  overflow: hidden;
}

.bk-rating-fill {
  height: 100%;
  background: var(--bk-rating-fill);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.bk-rating-text {
  color: var(--bk-muted);
  font-size: 0.85rem;
  min-width: 3ch;
}

.bk-reactions-buttons {
  display: flex;
  gap: 0.5rem;
}

.bk-vote {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--bk-accent);
  border-radius: var(--bk-radius);
  background: transparent;
  color: var(--bk-accent);
  font-size: 0.9rem;
  cursor: pointer;
}

.bk-vote:hover:not(:disabled),
.bk-vote:focus-visible:not(:disabled) {
  background: var(--bk-accent);
  color: #fff;
}

.bk-vote:disabled {
  opacity: 0.55;
  cursor: default;
}

.bk-vote.bk-voted {
  background: var(--bk-accent);
  color: #fff;
  opacity: 1;
}

.bk-reactions-note {
  color: var(--bk-muted);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 0.4rem 0 0;
}