/////////////////////////////////
// Reading Progress Indicator //
////////////////////////////////

.rpi{
  --rpi-size: 64px;
  --rpi-stroke: 8;
  --rpi-font: 14px;
  --rpi-gap: 2px;
  --rpi-bg: #ffffff;
  --rpi-fg: #111111;
  --rpi-txt: #111111;

  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2147483647;
  width: var(--rpi-size);
  height: var(--rpi-size);
  pointer-events: none;
}

.rpi .rpi-wrap{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 22px rgba(0,0,0,0.12);
  background: var(--rpi-bg);
  overflow: hidden;
}

.rpi .rpi-svg{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}

.rpi .rpi-bg{
  fill: none;
  stroke: rgba(0,0,0,0.08);
  stroke-width: var(--rpi-stroke);
}

.rpi .rpi-fg{
  fill: none;
  stroke: var(--rpi-fg);
  stroke-width: var(--rpi-stroke);
  stroke-linecap: round;
  stroke-dasharray: 0 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 100ms linear;
}

.rpi .rpi-percent{
  position: absolute;
  font-size: var(--rpi-font);
  line-height: 1;
  color: var(--rpi-txt);
  font-weight: 600;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  padding: var(--rpi-gap);
  box-sizing: border-box;
  transform-origin: center center;
}

.rpi[data-size="sm"]{ --rpi-size: 48px;  --rpi-stroke: 6;  --rpi-font: 12px; }
.rpi[data-size="md"]{ --rpi-size: 64px;  --rpi-stroke: 8;  --rpi-font: 14px; }
.rpi[data-size="lg"]{ --rpi-size: 88px;  --rpi-stroke: 10; --rpi-font: 16px; }
.rpi[data-size="xl"]{ --rpi-size: 112px; --rpi-stroke: 12; --rpi-font: 18px; }

.rpi[data-pos="left"]{  left: 20px; right: auto; }
.rpi[data-pos="right"]{ right: 20px; left: auto; }