@mixin progress-navigation-bar-icons-sprite {
  $progress-navigation-bar-use-fullscreen-exit-icon: false !default;

  .button,
  .navigation_mute {
    @extend %pageflow_sprite_icon;
    height: 42px;
    width: 42px;
  }

  .navigation_bar_buttons {
    .navigation_main {
      @include pageflow-sprite-icon-menu($target: ".button");
    }

    .navigation_main.active {
      @include pageflow-sprite-icon-close-header($target: ".button");
    }
  }

  .navigation_home {
    @include pageflow-sprite-icon-home($target: ".button");
  }

  .navigation_top {
    @include pageflow-sprite-icon-top($target: ".button");
  }

  .navigation_top.deactivated {
    @include pageflow-sprite-icon-top("disabled", $target: ".button");
  }

  .navigation_index {
    @include pageflow-sprite-icon-overview($target: ".button");
  }

  .navigation_index.active {
    @include pageflow-sprite-icon-overview("active", $target: ".button");
  }

  .navigation_fullscreen {
    @include pageflow-sprite-icon-fullscreen($target: ".button");
  }

  .navigation_fullscreen.active {
    @if ($progress-navigation-bar-use-fullscreen-exit-icon) {
      @include pageflow-sprite-icon-fullscreen-exit($target: ".button");
    } @else {
      @include pageflow-sprite-icon-fullscreen("active");
    }
  }

  .navigation_hide_text {
    @include pageflow-sprite-icon-hide-text($target: ".button");
  }

  .navigation_hide_text.active {
    @include pageflow-sprite-icon-hide-text("active", $target: ".button");
  }

  .navigation_menu.share {
    @include pageflow-sprite-icon-share($target: ".navigation_share.button");
  }

  .navigation_menu.credits {
    @include pageflow-sprite-icon-credits($target: ".button");
  }

  .volume-control {
    &:before,
    &:after {
      @extend %pageflow_sprite_icon;
      content: "";
      position: absolute;
      width: 27px;
      height: 27px;
    }

    &:before {
      @include pageflow-sprite-icon-volume-up;
    }

    &:after {
      @include pageflow-sprite-icon-volume-down;
    }
  }

  &.horizontal {
    .volume-control {
      &:before,
      &:after {
        top: -2px;
      }

      &:before {
        right: -5px;
      }

      &:after {
        left: -5px;
      }
    }
  }

  &.vertical {
    .volume-control {
      &:before,
      &:after {
        left: 10px;
      }

      &:before {
        top: 4%;
      }

      &:after {
        bottom: 4%;
      }
    }

    @include pageflow-progress-navigation-bar-small-height {
      .volume-control:before,
      .volume-control:after {
        display: none;
      }
    }
  }
}