/* Keep the indicator out of pointer-event handling. */
#progressbeam {
  pointer-events: none;
}

#progressbeam .bar {
  background: var(--progressbeam-bar-background, var(--progressbeam-bar-color, #29d));

  position: fixed;
  z-index: var(--progressbeam-z-index, 1031);
  top: 0;
  left: 0;

  width: 100%;
  height: var(--progressbeam-height, 2px);
  will-change: transform;
}

#progressbeam.progressbeam-failed .bar {
  background: var(--progressbeam-failure-color, #d33);
}

/* The peg supplies the moving bar's completion glow. */
#progressbeam .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--progressbeam-bar-color, #29d), 0 0 5px var(--progressbeam-bar-color, #29d);
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* The spinner is independently removable through showSpinner. */
#progressbeam .spinner {
  display: block;
  position: fixed;
  z-index: var(--progressbeam-z-index, 1031);
  top: 15px;
  right: 15px;
}

#progressbeam .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: var(--progressbeam-spinner-color, var(--progressbeam-bar-color, #29d));
  border-left-color: var(--progressbeam-spinner-color, var(--progressbeam-bar-color, #29d));
  border-radius: 50%;

  -webkit-animation: progressbeam-spinner 400ms linear infinite;
          animation: progressbeam-spinner 400ms linear infinite;
}

.progressbeam-custom-parent {
  overflow: hidden;
  position: relative;
}

.progressbeam-custom-parent #progressbeam .spinner,
.progressbeam-custom-parent #progressbeam .bar {
  position: absolute;
}

/* Keep the wrapper out of flex/grid layout in custom parents. */
.progressbeam-custom-parent #progressbeam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}

#progressbeam.progressbeam-rtl .bar {
  left: auto;
  right: 0;
}

#progressbeam.progressbeam-rtl .peg {
  right: auto;
  left: 0;
}

/* Bottom placement pins the bar and spinner to the viewport base. */
#progressbeam.progressbeam-bottom .bar {
  top: auto;
  bottom: 0;
}

#progressbeam.progressbeam-bottom .spinner {
  top: auto;
  bottom: 15px;
}

/* Spinner corners. These come last so spinnerPosition wins over position. */
#progressbeam.progressbeam-spinner-tr .spinner {
  top: 15px;
  right: 15px;
  bottom: auto;
  left: auto;
}

#progressbeam.progressbeam-spinner-tl .spinner {
  top: 15px;
  right: auto;
  bottom: auto;
  left: 15px;
}

#progressbeam.progressbeam-spinner-br .spinner {
  top: auto;
  right: 15px;
  bottom: 15px;
  left: auto;
}

#progressbeam.progressbeam-spinner-bl .spinner {
  top: auto;
  right: auto;
  bottom: 15px;
  left: 15px;
}

#progressbeam.progressbeam-indeterminate .bar {
  -webkit-animation: progressbeam-indeterminate 1.5s infinite ease-in-out;
  animation: progressbeam-indeterminate 1.5s infinite ease-in-out;
  transform: translate3d(-100%, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  #progressbeam .bar,
  #progressbeam .spinner-icon {
    transition: none !important;
    animation: none !important;
  }
}

@-webkit-keyframes progressbeam-indeterminate {
  0% { -webkit-transform: translate3d(-100%, 0, 0); }
  50% { -webkit-transform: translate3d(-10%, 0, 0); }
  100% { -webkit-transform: translate3d(100%, 0, 0); }
}
@keyframes progressbeam-indeterminate {
  0% { transform: translate3d(-100%, 0, 0); }
  50% { transform: translate3d(-10%, 0, 0); }
  100% { transform: translate3d(100%, 0, 0); }
}

@-webkit-keyframes progressbeam-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes progressbeam-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}