:root {
  --top-progress-height: 3px;
  --top-progress-color: #0052d9;
  --top-progress-glow: rgba(0, 82, 217, 0.28);
  --top-progress-z-index: 2147483000;
}

.top-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--top-progress-z-index);
  height: var(--top-progress-height);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  contain: strict;
  transform: translateZ(0);
  transition: opacity 160ms ease;
  will-change: opacity;
}

.top-progress.is-visible {
  opacity: 1;
}

.top-progress__bar {
  width: 100%;
  height: 100%;
  background: var(--top-progress-color);
  box-shadow: 0 0 10px var(--top-progress-glow), 0 0 4px var(--top-progress-glow);
  transform: scale3d(0, 1, 1);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.top-progress--tdesign {
  --top-progress-color: #0052d9;
  --top-progress-glow: rgba(0, 82, 217, 0.28);
}

.top-progress--success {
  --top-progress-color: #2ba471;
  --top-progress-glow: rgba(43, 164, 113, 0.28);
}

.top-progress--warning {
  --top-progress-color: #e37318;
  --top-progress-glow: rgba(227, 115, 24, 0.28);
}

.top-progress--gradient .top-progress__bar {
  background: linear-gradient(90deg, #0052d9, #366ef4 48%, #00a870);
}

@media (prefers-reduced-motion: reduce) {
  .top-progress,
  .top-progress__bar {
    transition-duration: 120ms;
  }
}