/// Vertical position of upper buttons.
$navigation-bar-padding-top: null !default;

$top-height: 44px;
$top-item-height: 44px;
$bottom-height: 268px;
$bottom-item-height: 36px;

$scroll-indicator-height: 30px;
$scroll-indicator-offset: 35px;

@if $navigation-display-header-button {
  $top-height: $top-height + $top-item-height;
} @else {
  .menu_li {
    display: none;
  }
}

@if not $navigation-display-share-button and
    not $navigation-display-hide-text-button {
  $bottom-height: $bottom-height - 2 * $bottom-item-height;
} @elseif not $navigation-display-share-button or
    not $navigation-display-hide-text-button{
  $bottom-height: $bottom-height - $bottom-item-height;
}

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

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

&.js {
  .navigation_bar_top {
    top: 0;
    box-sizing: border-box;
    padding-top: $navigation-bar-padding-top;
  }

  .navigation_bar_bottom {
    bottom: 0;
    height: $bottom-height;
  }

  .scroller {
    bottom: $bottom-height;
  }

  .navigation_scroll_indicator {
    height: $scroll-indicator-height;

    &.bottom {
      bottom: $bottom-height - $scroll-indicator-offset;
    }
  }

  @mixin top_positions($top-height) {
    .navigation_bar_top {
      height: $top-height + $top-item-height;
    }

    .scroller {
      top: $top-height + $top-item-height;
    }

    .navigation_scroll_indicator.top {
      top: $top-height + $top-item-height - $scroll-indicator-offset;
    }
  }

  @include top_positions($top-height);

  &.with_home_button,
  &.with_overview_button {
    @include top_positions($top-height + $top-item-height);
  }

  &.with_home_button.with_overview_button {
    @include top_positions($top-height + 2 * $top-item-height);
  }

  // dynamically added class when no share providers are configured
  &.without_sharing_button,
  &.mobile_sharing_only {
    @if $navigation-display-share-button {
      .navigation_menu.share {
        display: none;
      }

      .navigation_bar_bottom {
        height: $bottom-height - $bottom-item-height;
      }

      .scroller {
        bottom: $bottom-height - $bottom-item-height;
      }

      .navigation_scroll_indicator {
        &.bottom {
          bottom: $bottom-height - $scroll-indicator-offset - $bottom-item-height;
        }
      }
    }
  }
}