@import "../defaults"
@import "../../base/mixins/arrow"

// The navigation bar has a fixed height
$height = 96px

.navigation
.subnavigation
  border-bottom: 1px solid $divider
  border-width: 1px 0
  margin: 0 -20px
  position: relative
  z-index: 10
  overflow: hidden
  font-family: $font-family

.navigation
  background-color: $hero-background
  background-image: linear-gradient(top, rgba(255, 255, 255, .4) 0%, transparent 100%);
  box-shadow: 0 -3px 10px $nav-box-shadow, inset 0 0 1px $nav-box-shadow
  font-size: 16px
  font-weight: bold

  &.alternative
    // The alternative navigation bar has a smaller height
    $height = 64px

    box-shadow: none
    border-bottom: none
    height: $height

    .active
      background: none
      border: none

    a
      color: white
      font-weight: normal

      &:nth-child(3)
        border-left: none

      &:not(.loginout):not(.mobile):not(.sign)
        height: $height
        float: left
        line-height: $height

    h1
      position: absolute
      left: 50%
      margin-left: -750px

      .logo
        background-position: 0 -146px

    .sign
    .loginout
      height: 28px
      margin-top: 18px
      line-height: 18px
      font-size: 14px

    .row
      height: auto
      padding: 0

  // We need to apply the padding to the row, or we will break the responsiveness of
  // our faux-column sidebars
  .row
    height: $height - 2 // Max nav height (required for IE9) to show bottom border
    padding: 0 20px

  h1
    display: block
    float: left
    margin: 0
    overflow: hidden
    width: 177px

  .logo
    background: transparent url($sprite-location) no-repeat 0 25px
    background-size: 90% auto
    float: left
    height: $height
    margin: 1px 0 0
    text-indent: -9999px
    // make sure that the width is same with as the <aside> in the regular pages so
    // the divider aligns with their divider
    width: 177px

  .active
    background-color: $active-background
    background-image: linear-gradient(top, $nav-active-bg-top, @background-color)
    border: 1px solid $active-border

  a
    color: $link
    display: inline-block
    padding: 0 20px
    position: relative
    text-decoration: none
    text-transform: uppercase
    outline: none

    // Make the menu items the same height as the bar, so we have bigger click area
    // except for the login button as that will deform the button class it uses
    &:not(.loginout):not(.mobile):not(.sign)
      height: $height - 1 // substract 1px for the bottom border
      float: left
      line-height: $height

    // Sign up button should have a little margin towards the login button
    &:not(.loginout):not(.mobile)
      margin-right: 5px

    &:nth-child(3)
      border-left: 1px solid $divider

    &:hover
      color: $link-hover

  h1 a:not(.loginout):not(.mobile):not(.sign)
    height: $height - 3

  .mobile
    display: none

  .sign
  .loginout
    height: 32px
    margin-top: 30px
    padding: 5px 10px 2px
    text-align: center

    s
      font-size: 70%

.subnavigation a
  height: 48px
  line-height: @height
  padding: 0 20px

  &.active
    background-color: $active-background
    background-image: linear-gradient(top, rgba(255, 255, 255, .6), @background-color)
    border: 1px solid $active-border
    display: inline-block
    height: 50px
    margin: -1px 0

@media handheld, only screen and (min-width: 767px)
  .navigation.alternative .active
    arrow('top', 50%, 6px, $active-background, $active-background, 1px, true)

@media handheld, only screen and (max-width: 1540px) and (min-width: 1270px)
  .navigation.alternative h1
    width: 56px
    margin-left: -629px

@media handheld, only screen and (max-width: 1270px) and (min-width: 767px)
  .navigation
    a.loginout
      margin-right: 12px

    &.alternative h1
      right: 0
      left: initial
      margin-right: 20%
      width: 56px

@media handheld, only screen and (max-width: 1120px)
  .subnavigation a
    font-size: 12px

@media handheld, only screen and (max-width: 1120px) and (min-width: 767px)
  .navigation
    a:not(.mobile):not(.logo):not(.loginout):not(.sign)
      font-size: 13px

    a.sign
    a.loginout
      font-size: 10px
      padding-left: 3px
      padding-right: 3px

      s
        display: none

@media handheld, only screen and (max-width: 767px)
  // don't add the transitions until our webfonts are loaded as it will increase in size
  .wf-active .navigation
    transition: max-height 1s

  .navigation
    max-height: 90px
    margin: 0 // corrects the -20px margin

    h1
      height: 92px

    .row
      height: auto
      padding: 0 20px

    .mobile
      display: inline-block
      padding: 8px 10px 2px
      position: absolute
      right: 20px
      top: 30px

    h1
      float: none

    .logo
      float: none

    a:not(.mobile):not(.logo)
      display: block
      float: left
      line-height: 18px

      &:nth-child(3)
        border-left: none

      &:not(.loginout):not(.sign)
        border-bottom: 1px solid $divider
        height: 59px
        float: none
        line-height: 60px
        margin: 0 -20px

    a.sign
    a.loginout
      width: 44%
      margin: 20px 10px

    &.alternative
      border-bottom: 1px solid $divider
      box-shadow: 0 -3px 10px $nav-box-shadow, inset 0 0 1px $nav-box-shadow
      height: 70px

      h1
        height: 70px
        position: relative
        left: initial
        margin-left: 20px
        width: 180px

      a:not(.mobile):not(.logo):not(.loginout):not(.sign)
        margin: 0
        border-bottom: none

        &.active
          arrow('left', 50%, 6px, $active-background, $active-background, 1px, true)

      .mobile
        top: 15px

  // by using :target we can change the menu's height, we need to use a fixed height
  // in order for it to animate nicely
  #navigation:target
    height: auto
    max-height: 800px