// temporary stuff to be moved in core with discourse-loading-slider

.d-progress-bar-container {
  --loading-width: 80%;
  --still-loading-width: 90%;

  --still-loading-duration: 10s;
  --done-duration: 0.4s;
  --fade-out-duration: 0.4s;

  position: absolute;
  top: 0;
  left: 0;
  z-index: z("header") + 2000;
  height: 3px;
  width: 100%;
  opacity: 0;
  transition: opacity var(--fade-out-duration) ease var(--done-duration);
  background-color: var(--primary-low);

  .d-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--tertiary);
  }

  &.loading,
  &.still-loading {
    opacity: 1;
    transition: opacity 0s;
  }

  &.loading .d-progress-bar {
    transition: width var(--loading-duration) ease-in;
    width: var(--loading-width);
  }

  &.still-loading .d-progress-bar {
    transition: width var(--still-loading-duration) linear;
    width: var(--still-loading-width);
  }

  &.done .d-progress-bar {
    transition: width var(--done-duration) ease-out;
    width: 100%;
  }

  body.footer-nav-ipad & {
    top: 49px; // TODO: Share $footer-nav-height from footer-nav.scss
  }
}