/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

// NOTE: You can't use @extend that break component independent and topdoc parsing.

// internal variables
var-navigation-bar-background-color = $toolbar-background-color
var-navigation-bar-separator-color = $toolbar-border-color
var-navigation-bar-color = $toolbar-text-color

var-navigation-bar-height = 44px
var-navigation-bar-box-shadow = none
var-navigation-bar-padding = 0
var-navigation-bar-separator = 1px solid var-navigation-bar-separator-color

/*! topdoc
  name: Navigation Bar
  class: navigation-bar
  markup:
    <div class="navigation-bar">
      <div class="navigation-bar__center">Navigation Bar</div>
    </div>
*/

retina-navigation-bar-border(position = bottom, color = #ddd)
  +retina-query()
    border-{position} none
    background-size 100% 1px
    background-repeat no-repeat
    background-position position
    background-image linear-gradient(0deg, color, color 50%, transparent 50%) if position == 'bottom'
    background-image linear-gradient(180deg, color, color 50%, transparent 50%) if position == 'top'

navigation-bar()
  reset-font()
  reset-container()
  reset-base()
  reset-cursor()
  z-index 2

navigation-bar__item()
  reset-box-model()
  reset-base()

.navigation-bar
  navigation-bar()
  display block
  height var-navigation-bar-height
  padding-left var-navigation-bar-padding
  padding-right var-navigation-bar-padding
  background var-navigation-bar-background-color
  color var-navigation-bar-color
  box-shadow var-navigation-bar-box-shadow
  border-bottom var-navigation-bar-separator
  font-weight var-font-weight
  width 100%
  white-space nowrap
  overflow visible
  retina-navigation-bar-border(bottom, var-navigation-bar-separator-color)

.navigation-bar__line-height
  line-height var-navigation-bar-height
  padding-bottom 0
  padding-top 0

.navigation-bar__bg
  background var-navigation-bar-background-color

.navigation-bar__item
  navigation-bar__item()
  height var-navigation-bar-height
  vertical-align top
  overflow visible
  display block
  vertical-align middle
  float left

.navigation-bar__left
  @extend .navigation-bar__item
  max-width 50%
  width 27%
  text-align left

.navigation-bar__right
  @extend .navigation-bar__item
  max-width 50%
  width 27%
  text-align right

.navigation-bar__center
  @extend .navigation-bar__item
  width 46%
  text-align center
  line-height var-navigation-bar-height
  font-size var-font-size--large
  font-weight var-font-weight--large
  color var-navigation-bar-color

.navigation-bar__title
  line-height var-navigation-bar-height
  font-size var-font-size--large
  font-weight var-font-weight--large
  color var-navigation-bar-color
  margin 0
  padding 0
  overflow visible

.navigation-bar__center:first-child:last-child
  width 100%

/*! topdoc
  name: Navigation Bar Item
  use: Toolbar Button, Navigation Bar
  markup:
    <div class="navigation-bar">
      <div class="navigation-bar__left">
        <span class="toolbar-button--quiet navigation-bar__line-height">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="navigation-bar__center">
        Navigation Bar
      </div>

      <div class="navigation-bar__right">
        <span class="toolbar-button--quiet navigation-bar__line-height">Label</span>
      </div>
    </div>
*/

/*! topdoc
  name: Navigation Bar with Outline Button
  use: Toolbar Button, Navigation Bar
  markup:
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="navigation-bar">
      <div class="navigation-bar__left">
        <span class="toolbar-button--outline navigation-bar__line-height">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="navigation-bar__center">
        Title
      </div>

      <div class="navigation-bar__right">
        <span class="toolbar-button--outline navigation-bar__line-height">Button</span>
      </div>
    </div>
*/

/*! topdoc
  name: Android-like Navigation Bar
  class: navigation-bar--android
  hint: .navigation-bar--android
  use: Navigation Bar, Toolbar Button
  markup:
    <div class="navigation-bar navigation-bar--android">
      <div class="navigation-bar__left navigation-bar--android__left">
        <span class="toolbar-button navigation-bar__line-height" style="padding:0 5px 0 5px;"><i class="ion-android-arrow-back" style="font-size:20px;"></i></span>
      </div>
      <div class="navigation-bar__center navigation-bar--android__center">
        <span class="toolbar-button navigation-bar__line-height" style="padding:0">
          <i class="ion-cube" style="font-size:20px;"></i> App Bar
        </span>
      </div>
      <div class="navigation-bar__right navigation-bar--android__right">
        <span class="toolbar-button--quiet navigation-bar__line-height">
          <i class="ion-android-share" style="font-size:20px;"></i>
        </span>
        <span class="toolbar-button--quiet navigation-bar__line-height">
          <i class="ion-android-more" style="font-size:20px;"></i>
        </span>
      </div>
    </div>
*/
.navigation-bar--android__left
  float left
  text-align left
  width auto
  min-width 10px

.navigation-bar--android__center
  float left
  text-align left
  width auto
  max-width 50%

.navigation-bar--android__right
  float right
  text-align right
  width auto

.navigation-bar--android__center:first-child:last-child
  padding-left 10px

/*! topdoc
  name: Android-like Navigation Bar(2)
  use: Android-like Navigation Bar
  markup:
    <div class="navigation-bar navigation-bar--android">
      <div class="navigation-bar__left navigation-bar--android__left">
        <span class="toolbar-button navigation-bar__line-height" style="padding:0 5px 0 0;"><i class="ion-android-drawer" style="font-size:20px;"></i></span>
      </div>
      <div class="navigation-bar__center navigation-bar--android__center">
        App Bar
      </div>
      <div class="navigation-bar__right navigation-bar--android__right">
        <span class="toolbar-button--quiet navigation-bar__line-height">
          <i class="ion-android-star" style="font-size:20px;"></i>
        </span>
        <span class="toolbar-button--quiet navigation-bar__line-height">
          <i class="ion-android-search" style="font-size:20px;"></i>
        </span>
        <span class="toolbar-button--quiet navigation-bar__line-height">
          <i class="ion-android-more" style="font-size:20px;"></i>
        </span>
      </div>
    </div>
*/

/*! topdoc
  name: Transparent Navigation Bar
  class: navigation-bar--transparent
  use: Toolbar Button, Navigation Bar
  markup:
    <div class="navigation-bar navigation-bar--transparent">
      <div class="navigation-bar__left">
        <span class="toolbar-button--quiet navigation-bar__line-height">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="navigation-bar__center">
        Navigation Bar
      </div>
      <div class="navigation-bar__right">
        <span class="toolbar-button--quiet navigation-bar__line-height">Label</span>
      </div>
    </div>
*/

.navigation-bar--transparent
  background-color transparent
  background-image none
  border none

/*! topdoc
  name: Navigation Bar with Outline Button
  use: Toolbar Button, Navigation Bar
  markup:
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="navigation-bar">
      <div class="navigation-bar__left">
        <span class="toolbar-button--outline navigation-bar__line-height">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="navigation-bar__center">
        Title
      </div>

      <div class="navigation-bar__right">
        <span class="toolbar-button--outline navigation-bar__line-height">Button</span>
      </div>
    </div>
*/

/*! topdoc
  name: Transparent Navigation Bar
  class: navigation-bar--transparent
  use: Toolbar Button, Navigation Bar
  markup:
    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="navigation-bar navigation-bar--transparent">
      <div class="navigation-bar__left">
        <span class="toolbar-button--quiet navigation-bar__line-height">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="navigation-bar__center">
        Navigation Bar
      </div>
      <div class="navigation-bar__right">
        <span class="toolbar-button--quiet navigation-bar__line-height">Label</span>
      </div>
    </div>
*/

.navigation-bar--transparent
  background-color transparent
  background-image none
  border none

/*! topdoc
  name: Bottom Bar
  class: bottom-bar
  use: Navigation Bar
  markup:
    <div class="bottom-bar">
      <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
    </div>
*/
.bottom-bar
  navigation-bar()
  display block
  height var-navigation-bar-height
  padding-left var-navigation-bar-padding
  padding-right var-navigation-bar-padding
  background var-navigation-bar-background-color
  color var-navigation-bar-color
  box-shadow var-navigation-bar-box-shadow
  font-weight var-font-weight
  border-bottom none
  border-top var-navigation-bar-separator
  position absolute
  bottom 0px
  right 0px
  left 0px
  retina-navigation-bar-border(top, var-navigation-bar-separator-color)

.bottom-bar__line-height
  line-height var-navigation-bar-height
  padding-bottom 0
  padding-top 0

.bottom-bar--transparent
  background-color transparent
  background-image none
  border none

/*! topdoc
  name: Navigation Bar with Segment
  class: navigation-bar
  hint: .navigation-bar .button-bar
  use: Segment, Navigation Bar
  markup:
    <div class="navigation-bar">
      <div class="navigation-bar__center">
        <div class="button-bar" style="width:200px;margin:7px 50px;">
          <div class="button-bar__item">
            <input type="radio" name="navi-segment-a" checked>
            <div class="button-bar__button">One</div>
          </div>

          <div class="button-bar__item">
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">Two</div>
          </div>
        </div>
      </div>
    </div>
*/
