.kl-scroll-indicator {
  --kl-scroll-indicator-segment-width: 2.7rem;
  --kl-scroll-indicator-segment-height: 0.5rem;
  display: none;
  justify-content: center;
  gap: 0.8rem;
}

.kl-scroll-indicator[hidden] {
  display: none;
}

.kl-scroll-indicator__segment {
  width: var(--kl-scroll-indicator-segment-width);
  height: var(--kl-scroll-indicator-segment-height);
  border-radius: 3rem;
  background-color: #d9d9d9;
  transition: background-color 0.2s ease;
}

.kl-scroll-indicator__segment.is-active {
  background-color: #787878;
}

@media (prefers-reduced-motion: reduce) {
  .kl-scroll-indicator__segment {
    transition: none;
  }
}