/*
 * Reading progress bar
 * A thin (2px) bar pinned just below the sticky Material header that fills
 * from left to right as the reader scrolls through the page, using the
 * theme accent color.
 */

.reading-progress {
  position: fixed;
  top: var(--md-header-height, 2.4rem); /* sits flush against the bottom edge of the sticky Material .md-header */
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 6;
  pointer-events: none;
  background: transparent;
}

.reading-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--md-accent-fg-color);
  transition: width 60ms linear;
}