.blog-progress-wrap {
  --blog-progress-size: px;

  --blog-progress-color: rgba(, );
  --blog-progress-bg-color: rgba(, );

  --blog-progress-stroke-width: px;
  --blog-progress-button-size: px;

  --blog-progress-icon-color: ;

  /* THIS is the important one for opacity */
  --blog-progress-button-bg: rgba(, );

  position: fixed;
  right: px;
  bottom: px;

  width: var(--blog-progress-size);
  height: var(--blog-progress-size);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 99999;

  /* hidden until scroll */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.blog-progress-wrap.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.blog-progress-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.blog-progress-bg,
.blog-progress-line {
  fill: none;
  stroke-width: var(--blog-progress-stroke-width);
}

.blog-progress-bg {
  stroke: var(--blog-progress-bg-color);
}

.blog-progress-line {
  stroke: var(--blog-progress-color);
  stroke-linecap: round;
}

/* BUTTON (arrow container) */
.blog-progress-link {
  position: relative;
  z-index: 2;

  width: var(--blog-progress-button-size);
  height: var(--blog-progress-button-size);

  border-radius: 999px;

  background: var(--blog-progress-button-bg);
  box-shadow: none;
  border: none;

  color: var(--blog-progress-icon-color);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: px;
  line-height: 1;

  text-decoration: none;
}

/* kill underline everywhere */
.blog-progress-link,
.blog-progress-link:hover,
.blog-progress-link:focus,
.blog-progress-link:active,
.blog-progress-link span {
  text-decoration: none !important;
}

/* remove theme pseudo elements if any */
.blog-progress-link::before,
.blog-progress-link::after {
  display: none;
  content: none;
}

/* optional subtle hover */
.blog-progress-link:hover {
  opacity: 0.85;
}

/* mobile */
@media (max-width: 767px) {
  .blog-progress-wrap {
    right: px;
    bottom: px;

    transform: scale();
    transform-origin: bottom right;
  }

  {% if module.hide_on_mobile %}
  .blog-progress-wrap {
    display: none;
  }
  {% endif %}
}