/* Global top loading progress bar */
html {
  --loading-progress: 0%;
  --loading-bar-color: #22c86a;
}

html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: var(--loading-progress);
  height: 3px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #18b95b 0%, var(--loading-bar-color) 58%, #72e99e 100%);
  box-shadow: 0 0 10px rgba(34, 200, 106, 0.55), 0 1px 3px rgba(34, 200, 106, 0.28);
  transition: width 220ms cubic-bezier(.22, .7, .2, 1), opacity 160ms ease;
}

html.loading-bar-visible::before {
  opacity: 1;
}

html.loading-bar-finishing::before {
  transition: width 150ms ease-out, opacity 220ms ease 120ms;
}

@media (prefers-reduced-motion: reduce) {
  html::before {
    transition: opacity 100ms linear;
  }
}