/**
 * Stylesheet
 *
 * @namespace Lungo.Layout
 * @class Nav
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "import/constants.styl"
@import "import/vendor.styl"

nav
  &.groupbar, footer &
    display-box()
    box-pack( justify )
    & > a
      box-flex( 1 )

  header &
    font-weigth: 700
    & a
      padding: 0 6px
      min-width: 30px
      z-index: 1000
      float: left
      height: HEADER_FOOTER_HEIGHT
      text-align: center

      & .icon
        font-size: 1.7em

      & img
        width: 16px
        height: 16px
        top: -1px !important

      & .bubble
        position: relative
        top:  -12px
        left: -12px
        margin-right: -20px

      & abbr
        font-size: 0.9em
        font-weight: 700

      &.button a
        margin: 5px 5px 5px 0
        height: 32px
        line-height: 32px
        & .icon
          line-height: 33px
        &:first-child
          margin: 5px

      & .icon ~ abbr
        margin-left: 4px
        float: right

      & .loading
        margin-top: .5em
        font-size: 1.6em
        & + .icon
          display: none


  &.groupbar
    position: absolute
    top: HEADER_FOOTER_HEIGHT
    height: HEADER_GROUPBAR_HEIGHT
    width: 100%
    z-index: 2
    line-height: HEADER_GROUPBAR_HEIGHT
    & > a
      padding: 0px
      margin: 0px
      height: HEADER_GROUPBAR_HEIGHT !important
      display: block
      text-align: center

      & .icon
          font-size: 1.0em
          margin-right: 2px

      & .bubble
          position: relative
          top: -1px
          left: 2px


  footer &
    & a
      text-align: center
      display: block
      padding: 0
      height:  HEADER_FOOTER_HEIGHT

    & .icon
      font-size: 2.0em !important
      line-height: HEADER_FOOTER_HEIGHT
      width: 32px
      display: inline-block

    & .bubble
      top:  -42px
      left: 4px
      & .loading
        top: 0
        font-size: 1.4em

    abbr
      display: none

    & .bubble
      position: relative
      top:  -12px
      left: -12px
      margin-right: -20px

    &.with-labels
      & .icon
        line-height: 36px
      & abbr
        display: block !important
        margin-top: -8px
        z-index: 1

        font-size: 11px
        line-height: 14px

        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis