$nav-color: $main-color;
$nav-font: $standard-font;

$nav-active-chapter: desaturate($main-color, 50%);
$nav-active-page: $main-color;

$nav-active-chapter-beginning: desaturate($main-color, 40%);

$nav-hint-color: #A9A9A9 !default;
$nav-display-header-button: false !default;
$nav-display-overview-button: true !default;

$nav-chapter-beginning: #afafaf;
$nav-dot-even: #9B9B9B;
$nav-dot-odd: #afafaf;

$nav-bg-color: $basic-background-color;
$bg-color: $nav-bg-color;
$nav-bg-color-transparent: $basic-background-color-transparent;

@mixin pageflow-progress-navigation-bar-small-height {
  @media screen and (max-height: 870px) {
    @content;
  }
}

.progress_navigation_bar {
  @if $nav-display-header-button {
    .navigation_button_area .navigation_bar_buttons li {
      height: 11.11%;

      &.mute {
        height: 22.22%;
      }
    }

    &.with_home_button {
      .navigation_button_area .navigation_bar_buttons li {
        height: 10%;

        &.mute {
          height: 20%;
        }
      }
    }
  }
  @else {
    .navigation_button_area .navigation_bar_buttons li {
      height: 12.25%;

      &.menu_li {
        display: none;
      }

      &.mute {
        height: 25%;
      }
    }

    &.with_home_button {
      .navigation_button_area .navigation_bar_buttons li {
        height: 11.11%;

        &.mute {
          height: 22.22%;
        }
      }
    }
  }

  @if not $nav-display-overview-button {
    .navigation_overview_item {
      display: none;
    }
  }

  .navigation_button_area .navigation_bar_buttons {
    &:after {
      background-color: $nav-bg-color;
      background-color: $nav-bg-color-transparent;
    }

    .navigation_credits_box a{
      color: $main-color;
    }

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

      .button {
        text-decoration: none;
        font-size: 16px;
        width: 28px;
        height: 28px;
        display: block;
        background: -webkit-linear-gradient(-75deg, rgba(255, 255, 255, 0.71), rgba(0, 0, 0, 0.32));
        background-color: #03818c !important;
        box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.2);
        border-radius: 18px;
        color: rgba(0, 0, 0, 0.75);
        cursor: pointer;
        margin: -25px auto 0 30px;
        position: relative;
        background-color: rgb(219, 219, 219) !important;
        @include shine-gradient;

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

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

          .button, .navigation_mute, .navigation_share {
            color: rgba(255,255,255,0.9);
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
          }
      }

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

      &:hover, &.active, &:active {
        .navi_hint {
          color: $nav-color;
        }
      }

      &:active .button{
        box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
        -webkit-transform: translate(1px,1px);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.2) 100%);
      }
    }

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

      display: inline-block;
      width: 100%;
      text-align: center;
      line-height: 28px;
      border-bottom: 0px !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;
      }
    }

    &.js .navigation_bar_bottom li.fullscreen {
      height: auto;
    }

    &.js a.scroll_indicator {
      background-image: image-url('pageflow/themes/default/scroll_indicator_sprite.png');
    }

    .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_mute {
        font-weight: bold;

        @include fa-volume-up-icon;

        &.muted {
          @include fa-volume-off-icon;
        }
        &.muted:before {
          margin-right: 2px;
        }
      }
    }
    .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;
      }
    }

    .navigation_share_box {
      a {
        text-align: center;

        p {
          font-family: SourceSansPro;
          font-size: 12px;
        }
      }

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

      a:hover {
        p {
          color: $nav-color;
        }

        .share_google, .share_facebook, .share_twitter {
          &:before {
            color: $nav-color;
          }
        }
      }

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

  &.js .scroller:after {
    background-color: $nav-bg-color;
    background-color: $nav-bg-color-transparent;
  }

  .scroller ul, &.js .scroller ul {
    a {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: $nav-dot-even;
      border-bottom: 1px solid $nav-bg-color;
      border-bottom: 1px solid $nav-bg-color-transparent;
      @include box-sizing(border-box);

      &.in_active_chapter {
        background-color: $nav-active-chapter;
      }

      &.active {
        cursor: default;
        background-color: $nav-active-page;


        img {
          border-left: 5px solid $nav-active-page;
        }
      }
    }

    li.chapter_beginning a {
      background-color: $nav-chapter-beginning;

        &.in_active_chapter {
          background-color: $nav-active-chapter-beginning;
        }

        &.active {
          background-color: $main-color;
        }
    }

    img {
      display: block;
    }

    &.no_chapters {
      li.chapter_beginning a, li a.in_active_chapter, li.chapter_beginning a.in_active_chapter {
        background-color: $nav-dot-even;

        &.active {
          background-color: $nav-active-page;
        }
      }
    }
  }

  &.js .volume-control .volume-level {
    background-color: $nav-color;
  }
}