[data-calio-scroll-fill="yes"] .calio-scroll-fill-target {
  --calio-scroll-fill-progress: 0%;
  will-change: background-image, filter;
  background-repeat: no-repeat;
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--calio-scroll-fill-fill, #0f172a) 0,
    var(--calio-scroll-fill-fill, #0f172a) var(--calio-scroll-fill-progress, 0%),
    var(--calio-scroll-fill-base, #94a3b8) var(--calio-scroll-fill-progress, 0%),
    var(--calio-scroll-fill-base, #94a3b8) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-scope {
  display: inline;
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-scope.is-measuring-lines .calio-scroll-fill-measure-word {
  visibility: hidden;
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-scope.is-mode-words .calio-scroll-fill-segment {
  display: inline-block;
  vertical-align: baseline;
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-scope.is-mode-lines {
  display: block;
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-scope.is-mode-lines .calio-scroll-fill-segment {
  display: block;
  width: 100%;
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-scope.is-mode-lines .calio-scroll-fill-segment + .calio-scroll-fill-segment {
  margin-top: 0.08em;
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-target.is-skin-gradient {
  background-image: linear-gradient(
    90deg,
    var(--calio-scroll-fill-fill, #2563eb) 0,
    var(--calio-scroll-fill-fill-secondary, #38bdf8) var(--calio-scroll-fill-progress, 0%),
    var(--calio-scroll-fill-base, #94a3b8) var(--calio-scroll-fill-progress, 0%),
    var(--calio-scroll-fill-base, #94a3b8) 100%
  );
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-target.is-skin-glow {
  text-shadow: 0 0 18px color-mix(in srgb, var(--calio-scroll-fill-fill, #0f172a) 18%, transparent);
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-scope.is-mode-words .calio-scroll-fill-target.is-skin-glow,
[data-calio-scroll-fill="yes"] .calio-scroll-fill-scope.is-mode-lines .calio-scroll-fill-target.is-skin-glow {
  text-shadow: 0 0 14px color-mix(in srgb, var(--calio-scroll-fill-fill, #0f172a) 16%, transparent);
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-target.is-rtl {
  background-image: linear-gradient(
    270deg,
    var(--calio-scroll-fill-fill, #0f172a) 0,
    var(--calio-scroll-fill-fill, #0f172a) var(--calio-scroll-fill-progress, 0%),
    var(--calio-scroll-fill-base, #94a3b8) var(--calio-scroll-fill-progress, 0%),
    var(--calio-scroll-fill-base, #94a3b8) 100%
  );
}

[data-calio-scroll-fill="yes"] .calio-scroll-fill-target.is-rtl.is-skin-gradient {
  background-image: linear-gradient(
    270deg,
    var(--calio-scroll-fill-fill, #2563eb) 0,
    var(--calio-scroll-fill-fill-secondary, #38bdf8) var(--calio-scroll-fill-progress, 0%),
    var(--calio-scroll-fill-base, #94a3b8) var(--calio-scroll-fill-progress, 0%),
    var(--calio-scroll-fill-base, #94a3b8) 100%
  );
}