.progress-bar-container {
  position fixed
  top 0
  left 0
  z-index $z-index-9
  width 100%

  if (hexo-config('pjax') && hexo-config('pjax.enable') == true) {

    .pjax-progress-bar {
      position absolute
      top 0
      left 0
      z-index $z-index-8
      width 0
      height 2px
      background var(--pjax-progress-bar-color)
      visibility hidden
      opacity 0
      transition-t("width, opacity", "0, 0", "0.1, 0.1", "linear")


      &.show {
        visibility visible
        opacity 1
      }
    }


    .pjax-progress-icon {
      position absolute
      top 0.4rem
      right 0.3rem
      z-index $z-index-8
      color var(--text-color-3)
      font-size 1.1rem
      visibility hidden

      +keep-tablet() {
        top 0.3rem
        right 0.2rem
        font-size 1rem
      }

      &.show {
        visibility visible
      }
    }
  }

  if (hexo-config('scroll') && hexo-config('scroll.progress_bar') == true) {
    .scroll-progress-bar {
      position absolute
      top 0
      left 0
      z-index $z-index-7
      width 0
      height var(--header-scroll-progress-bar-height)
      background var(--primary-color)
      visibility hidden
      transition-t("width", "0", "0.1", "linear")

      &.hide {
        display none !important
      }
    }
  }
}