$spinner-size = 18px
$spinner-margin = ($nav-item-height - $spinner-size) / 2

#nprogress
  pointer-events: none

#nprogress .bar
  background: $nprogress-color
  position: fixed
  z-index: 1031
  top: 0
  left: 0
  width: 100%
  height: 2px

  .nav--floating &
    +above(rupture.mobile-cutoff)
      background: $nprogress-color-floating

#nprogress .peg
  display: block
  position: absolute
  right: 0px
  width: 100px
  height: 100%
  box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color
  opacity: 1.0
  transform: rotate(3deg) translate(0px, -4px)

  .nav--floating &
    +above(rupture.mobile-cutoff)
      box-shadow: 0 0 10px $nprogress-color-floating, 0 0 5px $nprogress-color-floating

#nprogress .spinner
  display: block
  position: fixed
  z-index: 1031
  top: rem($spinner-margin)
  right: rem($spinner-margin)

#nprogress .spinner-icon
  width: rem($spinner-size)
  height: rem($spinner-size)
  box-sizing: border-box
  border: solid 2px transparent
  border-top-color: $nprogress-color
  border-left-color: $nprogress-color
  border-radius: 50%
  animation: nprogress-spinner 400ms linear infinite

  .nav--floating &
    +above(rupture.mobile-cutoff)
      border-top-color: $nprogress-color-floating
      border-left-color: $nprogress-color-floating

.nprogress-custom-parent
  overflow: hidden
  position: relative

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar
  position: absolute

@keyframes nprogress-spinner
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)