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

@import "__init.styl"

HEADER_GROUPBAR_HEIGHT = 32px

nav

  /* ========================================================================= */
  /* ================================= HEADER ================================ */
  /* ========================================================================= */
  header &
    & .button, button
      margin-top: 6px
      float: left
    &.right .button, &.right button
      margin-right: 5px
    &:not(.right) .button, &:not(.right) button
      margin-left: 5px

    & a:not(.button)
      padding: 0px 11px !important
      float: left
      height: HEADER_HEIGHT
      & > .icon
        font-size: 1.8em

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

    & abbr
      font-size: FONT_SIZE_SMALL
      font-weight: 700
      display: block

    & .icon ~ abbr
      margin-left: 4px

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

  &[data-control=groupbar], footer &
    display-box()
    box-pack(justify)
    width: 100%
    & > a
      box-flex(1)
      text-decoration: none


  /* ========================================================================= */
  /* =============================== GROUPBAR ================================ */
  /* ========================================================================= */
  &[data-control=groupbar]
    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

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


  /* ========================================================================= */
  /* ================================= MENU ================================== */
  /* ========================================================================= */
  &[data-control=menu]
    position: absolute
    left: 0px
    top: HEADER_HEIGHT
    visibility: hidden
    z-index: 2
    width: 100%
    text-align: center

    transform translateY(-120%)
    transition-property transform
    transition-duration TRANSITION_TIME
    transition-timing-function DEFAULT_TRANSITION
    backface-visibility hidden

    &.show
      visibility: visible
      transform translateY(0%)

    &.icons
      font-size: FONT_SIZE_TINY
      & > a
        width: 25%
        float: left
        padding: 10px 0
        & > .icon
          font-size: S = 32px
          line-height: S
          display: block

    &:not(.icons)
      font-size: FONT_SIZE_BIG
      & > a
        display: block
        position: relative
        padding: LIST_PADDING LIST_PADDING_HORIZONTAL (LIST_PADDING - 1) LIST_PADDING_HORIZONTAL
        & > .icon
          position: absolute
          left: 0.5em
          font-size: 1.5em

  /* ========================================================================= */
  /* ================================ FOOTER ================================= */
  /* ========================================================================= */
  footer &
    & a
      text-align: center
      display: block
      padding: 0
      height:  HEADER_HEIGHT

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

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

    abbr
      display: none

    & .tag
      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