.custom-timeline {
  --num-stops: 3;
  --n: 1;
  --progress: 0.25;
  --stop-radius: 24px;
  --dot-radius: 18px;
  --bar-height: 20px;
  --bar-inner-height: 10px;
  --background-color: #cccccc;
  --stop-background-color: #aaaaaa;
  --stop-active-background-color: #c22fc2;
  --stop-color: #666666;
  --stop-active-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(var(--num-stops), auto);
  grid-template-rows: auto;
  grid-auto-flow: row;
  justify-content: space-between;
  align-items: center;
  margin-left: var(--stop-radius);
  margin-right: var(--stop-radius);
}
.custom-timeline .stop {
  grid-row: 1/-1;
  grid-column: var(--n)/span 1;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: var(--background-color);
  border-radius: var(--stop-radius);
  width: calc(2 * var(--stop-radius));
  height: calc(2 * var(--stop-radius));
  margin-left: calc(-1 * var(--stop-radius));
  margin-right: calc(-1 * var(--stop-radius));
}
.custom-timeline .dot {
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: var(--stop-background-color);
  color: var(--stop-color);
  border-radius: var(--dot-radius);
  width: calc(2 * var(--dot-radius));
  height: calc(2 * var(--dot-radius));
  line-height: 1;
  z-index: 2;
}
.custom-timeline .stop.active .dot {
  background-color: var(--stop-active-background-color);
  color: var(--stop-active-color);
}
.custom-timeline .bar-bg {
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: var(--bar-height);
  background-color: var(--background-color);
}
.custom-timeline .bar {
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: grid;
  align-items: start;
  height: var(--bar-inner-height);
  z-index: 1;
}
.custom-timeline .fill {
  width: calc(100% * var(--progress));
  height: var(--bar-inner-height);
  background-color: var(--stop-active-background-color);
  border-radius: calc(var(--bar-inner-height) / 2);
}

/*# sourceMappingURL=custom-timeline.css.map */