/* ===========================
   Changelog Timeline
   =========================== */

.changelog-timeline {
  --dot-size: 0.6rem;

  position: relative;
  max-inline-size: 48rem;
  margin-inline: auto;
}

/* Vertical line */
.changelog-timeline::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--dot-size) / 2);
  inline-size: 1.5px;
  background: var(--color-gray-light);
  translate: -50% 0;
}

/* Entry positioning and spacing */
.changelog-timeline > article {
  position: relative;
  padding-inline-start: calc(var(--dot-size) + 1.5rem);
  padding-block-end: var(--space-xxxl);
}

.changelog-timeline > article:last-child {
  padding-block-end: 0;
}

/* Green dot */
.changelog-timeline > article::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: var(--dot-size);
  block-size: var(--dot-size);
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 0 3px var(--color-bg);
}

/* Collapse timeline on narrow screens */
@media (max-width: 30rem) {
  .changelog-timeline::before,
  .changelog-timeline > article::before {
    display: none;
  }

  .changelog-timeline > article {
    padding-inline-start: 0;
  }
}