scroll-indicator {
  --__scrollbar-height: var(--scrollbar-height, 6px);
  --__scrollbar-background-color: var(--scrollbar-background-color, var(--color-background-subtle));
  --__scrollbar-accent-color: var(--scrollbar-accent-color, var(--color-accent));
  --__scrollbar-margin-top: var(--scrollbar-margin-top, var(--spacing-06));
}

scroll-indicator [data-scrollbar] {
  height: var(--__scrollbar-height);
  background-color: var(--__scrollbar-background-color);
  position: relative;
  clip-path: url(#clip-path-line);
}

scroll-indicator [data-scrollbar]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--scrolled, 0%);
  height: 100%;
  background-color: var(--__scrollbar-accent-color);
}

scroll-indicator [data-scrollbar]:not([hidden]) {
  margin-top: var(--__scrollbar-margin-top);
}