/* eSite | Author: PhDr. Pavel Bartoš, LL.M., DBA. | Version: 0.1.0-rc.17 */
.esite-scroll-progress {
  position: fixed;
  z-index: 44;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
  border-radius: 16px;
  color: var(--ink, #263951);
  background: color-mix(in srgb, var(--paper, #fff) 76%, transparent);
  box-shadow: 0 2px 14px #00000013;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 220ms ease;
  isolation: isolate;
  font:
    600 12px/1 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.esite-scroll-progress.is-visible {
  opacity: 0.76;
}
.esite-scroll-progress[data-scroll-corner^='top'] {
  top: calc(12px + env(safe-area-inset-top, 0px));
}
.esite-scroll-progress[data-scroll-corner^='bottom'] {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--social-bottom-space, 0px));
}
.esite-scroll-progress[data-scroll-corner$='left'] {
  left: calc(12px + env(safe-area-inset-left, 0px));
}
.esite-scroll-progress[data-scroll-corner$='right'] {
  right: calc(12px + env(safe-area-inset-right, 0px));
}
.esite-scroll-progress .scroll-progress-meter {
  position: absolute;
  inset: 3px;
  width: 48px;
  height: 48px;
  transform: rotate(-90deg);
  overflow: visible;
}
.esite-scroll-progress .scroll-progress-meter > * {
  fill: none;
  stroke-width: 2;
}
.esite-scroll-progress .scroll-progress-track {
  stroke: currentColor;
  opacity: 0.15;
}
.esite-scroll-progress .scroll-progress-ring {
  stroke: var(--accent, currentColor);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
}
.esite-scroll-progress span {
  position: relative;
}
@font-face {
  font-family: eSiteScrollItalic;
  src: url('fonts/scroll-italic.woff') format('woff');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
.esite-scroll-progress[data-scroll-style='digital'] {
  width: 88px;
  height: 62px;
  border-radius: 10px;
}
.esite-scroll-progress[data-scroll-style='digital'] .scroll-progress-meter,
.esite-scroll-progress[data-scroll-style='square'] .scroll-progress-meter {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}
.esite-scroll-progress[data-scroll-style='digital'] [data-scroll-percent] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -8px;
}
.esite-scroll-progress .scroll-digit {
  display: inline-block;
  width: 14px;
  height: 26px;
}
.esite-scroll-progress .scroll-digit i {
  position: absolute;
  display: block;
  background: currentColor;
  opacity: 0.1;
}
.esite-scroll-progress .scroll-digit i.active {
  opacity: 1;
}
.scroll-digit .segment-a,
.scroll-digit .segment-g,
.scroll-digit .segment-d {
  width: 12px;
  height: 3px;
  left: 1px;
  clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%);
}
.scroll-digit .segment-a {
  top: 0;
}
.scroll-digit .segment-g {
  top: 11.5px;
}
.scroll-digit .segment-d {
  bottom: 0;
}
.scroll-digit .segment-b,
.scroll-digit .segment-c,
.scroll-digit .segment-e,
.scroll-digit .segment-f {
  width: 3px;
  height: 11px;
  clip-path: polygon(50% 0, 100% 15%, 100% 85%, 50% 100%, 0 85%, 0 15%);
}
.scroll-digit .segment-b {
  right: 0;
  top: 1px;
}
.scroll-digit .segment-c {
  right: 0;
  bottom: 1px;
}
.scroll-digit .segment-e {
  left: 0;
  bottom: 1px;
}
.scroll-digit .segment-f {
  left: 0;
  top: 1px;
}
.esite-scroll-progress .scroll-percent-symbol {
  font-size: 12px;
}
.esite-scroll-progress[data-scroll-style='square'] {
  width: 68px;
  height: 68px;
  border-radius: 6px;
}
.esite-scroll-progress[data-scroll-style='square'] [data-scroll-percent] {
  font-family: eSiteScrollItalic, eSiteSerif, Georgia, serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -1px;
}
@media (prefers-reduced-motion: reduce) {
  .esite-scroll-progress {
    transition: none;
  }
}
@media print {
  .esite-scroll-progress {
    display: none;
  }
}
