@mixin outline-navigation-bar-icons-sprite {
  .menu_item {
    > a {
      display: block;
      height: 100%;
      text-decoration: none;
      margin: 0 4px;
    }

    .button {
      @extend %pageflow_sprite_icon;
      display: block;
      width: 40px;
      height: 40px;
      margin: 0 auto;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .share_box {
    a.share {
      width: 39px;
    }

    .button {
      margin-left: 5px;
    }
  }

  .volume-control {
    &:before,
    &:after,
    .volume-level:before {
      content: " ";
      @extend %pageflow_sprite_icon;
      background-repeat: no-repeat;
      position: absolute;
      width: 28px;
      height: 19px;
    }

    &:after,
    &:before {
      @include small-height {
        display: none;
      }
    }

    &:before {
      @include pageflow-sprite-icon-volume-down;
      top: 80%;
    }

    &:after {
      @include pageflow-sprite-icon-volume-up;
      top: 7%;
    }
  }

  .toggle.buttons {
    .button {
      @extend %pageflow_sprite_icon;
    }

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

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