/// Type of icons to use:
///
/// - `"icon-font"`: Circular buttons with font awesome icons.
///
/// - `"sprite"`: Custom icons from `icon_sprite.png` in theme
///   directory.
$progress-navigation-bar-icons: $widget-icons !default;

/// Display button to toggle header
$progress-navigation-bar-display-header-button: $navigation-display-header-button !default;

/// Display social share menu
$progress-navigation-bar-display-share-button: $navigation-display-share-button !default;

/// Display hide text menu button
$progress-navigation-bar-display-hide-text-button: $navigation-display-hide-text-button !default;

// Legacy

$nav-color: $main-color;

$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-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;

@import "../mixins";
@import "./default/widget_margin";

.progress_navigation_bar {
  @import "./default/buttons";
  @import "./default/credits";
  @import "./default/icons/icon_font";
  @import "./default/icons/sprite";
  @import "./default/menu_boxes";
  @import "./default/share_box";
  @import "./default/typography";

  @if $progress-navigation-bar-icons == "sprite" {
    @include progress-navigation-bar-icons-sprite;
  } @else {
    @include progress-navigation-bar-icons-icon-font;
  }

  .navigation_site_detail .thumbnail {
    @if $progress-navigation-bar-pictogram-visibility == visible {
      @extend %pageflow_page_type_thumbnail;
    }

    position: relative;
    width: 170px;
    height: 95px;
    margin-top: 12px;

    &:after {
      content: "";
      position: absolute;
      top: 28px;
      left: 66px;
      width: 38px;
      height: 38px;
      background-size: 76px 38px;
      background-repeat: no-repeat;
    }
  }

  @if $progress-navigation-bar-display-header-button {
    &.horizontal .scroller .navigation_dots {
      width: calc(100% - 40px);
    }

    .header_button {
      display: block;
      position: absolute;
      right: 7px;
      top: 2px;
      width: 26px;
      height: 26px;

      a {
        display: block;
        text-decoration: none;
        padding: 0;

        .button {
          width: 28px;
          height: 28px;
          background-image: image-url("pageflow/progress_navigation_bar/indicator.png");
          background-position: 0 0;
        }

        .button.close {
          background-position: -28px 0;
        }
      }
    }

    .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 $progress-navigation-bar-display-share-button {
    .navigation_menu.share {
      display: none;
    }
  }

  @if not $progress-navigation-bar-display-hide-text-button {
    .hide_text {
      display: none;
    }
  }

  &.horizontal.js {
    background-color: $nav-bg-color-transparent;

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

      @if not $progress-navigation-bar-display-share-button {
        .navigation_menu.share {
          display: none;
        }
      }

      @if not $progress-navigation-bar-display-hide-text-button {
        .hide_text {
          display: none;
        }
      }
    }
  }

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

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

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

    .navigation_share_box {
      a {
        text-align: center;
      }

      a.active,
      a:hover {
        p {
          color: $nav-color;
        }

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

  &.js .scroller:after {
    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-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;
  }
}