/* Progression globale des navigations History/fetch, au-dessus du dock V1. */
.navigation-progress {
  --navigation-progress-value: 0;
  --navigation-progress-color: var(--color-success);
  position: fixed;
  z-index: 12038;
  right: 0;
  bottom: var(--j04-dock-height, 3.75rem);
  left: 0;
  height: 0.625rem;
  overflow: visible;
  pointer-events: none;
}

.navigation-progress__label {
  position: absolute;
  left: var(--space-3);
  bottom: calc(100% + var(--space-1));
  max-width: calc(100vw - (2 * var(--space-6)));
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  color: var(--navigation-progress-color);
  font-family: var(--font-copy);
  font-size: var(--text-2xs);
  font-weight: 650;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-progress__label:not(:disabled) {
  cursor: pointer;
  pointer-events: auto;
}

.navigation-progress__label:not(:disabled):hover,
.navigation-progress__label:not(:disabled):focus-visible {
  color: color-mix(in srgb, var(--navigation-progress-color) 78%, white);
  text-decoration: underline;
}

.navigation-progress__label[hidden] {
  display: none;
}

.navigation-progress__value {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--navigation-progress-color);
  transform: scaleX(var(--navigation-progress-value));
  transform-origin: left center;
  transition: transform 180ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .navigation-progress__value {
    transition: none;
  }
}