/* Core styles for OProgress */
:root {
  --oprogress-color: #29d;
  --oprogress-height: 3px;
  --oprogress-z-index: 9999;
  --oprogress-easing: linear;
  --oprogress-speed: 200ms;
  --oprogress-indeterminate-duration: 2.1s;
}

.oprogress-container {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--oprogress-height);
  z-index: var(--oprogress-z-index);
  overflow: hidden;
}

.oprogress-container.oprogress-indeterminate {
  position: fixed;
}

.oprogress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--oprogress-speed) var(--oprogress-easing);
  will-change: transform;
}

.oprogress-bar-indeterminate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.oprogress-bar-indeterminate::before,
.oprogress-bar-indeterminate::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--oprogress-color, #29d);
  border-radius: 999px;
  will-change: left, right;
  animation: oprogress-indeterminate-1 var(--oprogress-indeterminate-duration) cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.oprogress-bar-indeterminate::after {
  animation-name: oprogress-indeterminate-2;
  animation-delay: calc(-0.5 * var(--oprogress-indeterminate-duration));
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes oprogress-indeterminate-1 {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes oprogress-indeterminate-2 {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}