/* Blog components — shared stylesheet.
   ShareButtons
   TableOfContents */

/* ---------- ShareButtons ---------- */

.c-share-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.c-share-buttons__btn {
  display: inline-flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-background);
  color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
  transition: color 0.2s, border-color 0.2s;
}
.c-share-buttons__btn:hover {
  border-color: color-mix(in srgb, var(--color-blue) 30%, transparent);
  color: var(--color-blue);
}

/* Copy button icon swap (.is-copied set for 1.8s by share-buttons.js) */
.c-share-buttons__icon-check { display: none; }
[data-share-copy].is-copied .c-share-buttons__icon-link { display: none; }
[data-share-copy].is-copied .c-share-buttons__icon-check { display: block; }

/* ---------- TableOfContents ---------- */

.c-toc__heading {
  font-size: var(--fs-xs);
  line-height: 16px;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
}

.c-toc__list {
  margin-top: 16px;
  border-left: 1px solid var(--color-border-light);
}
.c-toc__list li + li { margin-top: 10px; }

.c-toc__item { position: relative; }

.c-toc__link {
  display: block;
  padding-left: 16px;
  font-size: var(--fs-sm);
  line-height: 1.375;
  color: var(--color-grey-on-white);
  transition: color 0.2s;
}
.c-toc__link:hover { color: var(--color-foreground); }

.c-toc__link.is-active {
  color: var(--color-blue);
  font-weight: 500;
}
.c-toc__link.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--color-blue);
}