.js.progress_navigation_bar.vertical {
  &.show_on_mobile {
    opacity: 1;
    @include transition(opacity 0.4s ease);
  }

  .header_button  {
    display: none;
  }

  .navigation_dots {
    right: 8px;
    width: 14px;
    top: 50%;
    max-height: 100%;
    @include transform(translate(0, -50%) !important);
  }

  .navigation_menu.mute {
    .navi_hint {
      display: none;
    }

    .volume-control {
      .volume-level {
        &:before {
          display: block;
          content: "";
          background-position: -66px top;
          top: -9px;
          width: 18px;
          height: 16px;
          left: -6px;
        }
      }
    }
  }

  .navigation_credits_box {
    bottom: 0;
  }

  .navi_hint {
    @include pageflow-progress-navigation-bar-small-height {
      display: none;
    }
  }

  .scroller ul {
    @include pageflow-progress-mobile-variant {
      right: 3px;
      width: 8px;
    }
  }

  .scroller li {
    &.animate_in {
      &.moving_forwards {
        @include animation(pageflow-progress-navigation-bar-slide-in-from-bottom 0.4s ease-out);
      }

      &.moving_backwards {
        @include animation(pageflow-progress-navigation-bar-slide-in-from-top 0.4s ease-out);
      }

      &.moving_down {
        @include animation(pageflow-progress-navigation-bar-slide-in-from-right 0.4s ease-out);
      }

      &.moving_up {
        @include animation(pageflow-progress-navigation-bar-slide-in-from-left 0.4s ease-out);
      }
    }

    &.animate_out {
      &.moving_forwards {
        @include animation(pageflow-progress-navigation-bar-slide-out-to-top 0.4s ease-in);
        opacity: 0;
      }

      &.moving_backwards {
        @include animation(pageflow-progress-navigation-bar-slide-out-to-bottom 0.4s ease-in);
        opacity: 0;
      }

      &.moving_down {
        @include animation(pageflow-progress-navigation-bar-slide-out-to-left 0.4s ease-in);
        @include transform(translate3d(-50px, 0, 0));
      }

      &.moving_up {
        @include animation(pageflow-progress-navigation-bar-slide-out-to-right 0.4s ease-in);
        @include transform(translate3d(50px, 0, 0));
      }
    }
  }
}