/* Like + share bar on journal post pages. */
.blog-engage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 28px 0 8px;
  padding: 16px 0;
  border-top: 1px solid var(--bp-line);
  border-bottom: 1px solid var(--bp-line);
}
.blog-ico {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
.blog-like__icon .blog-ico path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.blog-like.is-on .blog-like__icon .blog-ico path {
  fill: var(--bp-berry);
  stroke: var(--bp-berry);
}
.blog-like,
.blog-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius);
  background: #fff;
  color: var(--bp-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.blog-like:hover,
.blog-share__btn:hover {
  border-color: color-mix(in srgb, var(--bp-berry) 35%, var(--bp-line));
  color: var(--bp-berry);
}
.blog-like.is-on {
  border-color: color-mix(in srgb, var(--bp-berry) 40%, var(--bp-line));
  background: var(--bp-berry-soft);
  color: var(--bp-berry);
}
.blog-like__n {
  min-width: 1.2em;
  font-variant-numeric: tabular-nums;
  color: var(--bp-faint);
}
.blog-like.is-on .blog-like__n { color: var(--bp-berry); }
.blog-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-share__ico { display: inline-flex; }
.blog-share__ico .blog-ico { color: currentColor; }