@mixin progress-navigation-bar-icons-icon-font(
  $button-background-color,
  $active-button-background-color,

  $button-icon-color,
  $active-button-icon-color,
  $deactivated-button-icon-color,

  $share-icon-color: $widget-text-color,
  $active-share-icon-color: $main-color
) {
  .navigation_button_area .navigation_bar_buttons {

    .navigation_bullet, .navigation_menu > a {
      position: absolute;
      text-decoration: none;

      .button {
        text-decoration: none;
        font-size: 16px;
        width: 28px;
        height: 28px;
        display: block;
        box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.2);
        border-radius: 18px;
        color: $button-icon-color;
        cursor: pointer;
        margin: -25px auto 0 30px;
        position: relative;
        background-color: $button-background-color !important;

        @include pageflow-progress-navigation-bar-small-height {
          margin: -14px auto 0 30px;
        }
      }

      &:hover .button,
      &.active .button {
        background-color: $active-button-background-color !important;
        -webkit-mask-image: none;
        color: $active-button-icon-color;
        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
      }

      .navi_hint {
        color: $nav-hint-color;
      }

      &:active .button {
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
        @include transform(translate(1px, 1px));
      }

      &.deactivated .button {
        color: $deactivated-button-icon-color;
      }
    }

    .button, .navigation_mute, .navigation_share {
      font-family: "FontAwesome";
      font-size: 1em;
      text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.6);

      display: inline-block;
      width: 100%;
      text-align: center;
      line-height: 28px;
      border-bottom: 0 !important;
    }

    .navigation_bullet.navigation_main {
      .button {
        @include fa-reorder-icon;
      }
    }

    .navigation_bullet.navigation_top {
      padding-top: 0;
      .button {
        border-bottom: 0;
        font-weight: bold;

        @include fa-arrow-circle-up-icon;
      }
    }

    .navigation_bullet.navigation_home {
      padding-top: 0;
      .button {
        border-bottom: 0;
        font-weight: bold;

        @include fa-home-icon;
      }
    }

    .navigation_bullet.navigation_index {
      .button {
        @include fa-th-icon;
      }
    }

    .navigation_bullet.navigation_fullscreen {
      .button {
        font-weight: bold;

        @include fa-expand-icon;
      }
    }

    .navigation_bullet.navigation_hide_text {
      .button {
        font-weight: bold;

        @include fa-photo-icon;
      }
    }

    .navigation_menu {
      .navigation_share {
        font-weight: bold;

        @include fa-share-icon;

        &:before {
          margin-left: 1px;
        }
      }
    }

    .navigation_menu {
      .navigation_credits {
        font-weight: bold;

        @include fa-info-icon;
      }
    }

    .share_google,
    .share_facebook,
    .share_twitter {
      font-size: 1.5em;
      &:before {
        font-family: "FontAwesome";
        color: $share-icon-color;
        text-shadow: none;
      }
    }

    .share_google {
      @include fa-google-plus-icon;
    }
    .share_facebook {
      @include fa-facebook-icon;
    }
    .share_twitter {
      @include fa-twitter-icon;
    }

    .navigation_share_box {
      a.active,
      a:hover {
        p {
          color: $active-share-icon-color;
        }

        .share_google,
        .share_facebook,
        .share_twitter {
          &:before {
            color: $active-share-icon-color;
          }
        }
      }
    }
  }

  .volume-control:before,
  .volume-slider:before {
    color: $button-background-color;
    position: absolute;
  }

  &.horizontal {
    .volume-control {
      @include fa-volume-down-icon;

      &:before {
        left: 0;
        top: 2px;
      }
    }

    .volume-slider {
      @include fa-volume-up-icon;

      &:before {
        right: -25px;
        top: -8px;
      }
    }
  }

  &.vertical {
    .volume-control {
      @include fa-volume-up-icon;

      &:before {
        left: 19px;
        top: 8%;
      }
    }

    .volume-slider {
      @include fa-volume-down-icon;

      &:before {
        left: -3px;
        bottom: -26px;
      }
    }

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