/*==============================================================================
 Nav Object

 Abstruction for the Nav http://csswizardry.com/2011/09/the-nav-abstraction/

 Markup:
 <ul class="b-nav">
      <li>
          something
      </li>
      <li>
          <a href="#"> link </a>
      </li>
 </ul>

 #{$namespace}nav
==============================================================================*/

#{$namespace}nav{
    list-style:none;
    margin-left:0;
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;

    > li{
        @include mq(mq-medium){
            display:inline-block;
            vertical-align: top;
        }

        letter-spacing: normal;
        text-rendering: auto;
    }

    a{
    }
}





/*==============================================================================
 Nav Bar

 Extends `.nav` to create a navigation bar

 Markup:
 <ul class="b-list--reset bl-navbar">
      <li>
          <a href="#"> link </a>
      </li>
      <li>
          <a href="#"> link </a>
      </li>
 </ul>

 #{$namespace}nav--bar
==============================================================================*/

#{$namespace}navbar{
    @include mq(mq-medium){
        display: table;
        width: 100%;
    };
}



#{$namespace}navbar__item{
    display: block;
    position: relative;
    width: 100%;
    > a {
        text-align: center;
        display: block;
        padding: .5em 1em;
    }

    @include mq(mq-small){
        display: table-cell;
        width: auto;
    };
}





/*==============================================================================
 Submenu class

 This class to be added on an element that you want it to have sub-menu

 Markup:
 <ul class="b-list--reset bl-navbar">
      <li>
          something
      </li>
      <li class="b-submenu">
          <a href="#"> link </a>
          <ul class="b-list--reset bl-menu">
              <li> <a href="#"> Submenu </a> </li>
              <li> <a href="#"> Submenu </a> </li>
          </ul>
      </li>
 </ul>

 #{$namespace}menu
==============================================================================*/

#{$namespace}submenu{
    #{$namespace}menu{
        position: absolute;
        left: -9999px;
    }

    &:hover,
    &:focus{
        #{$namespace}menu{
            left: 0;
            right: 0;
        }
    }
}





/*==============================================================================
 Menu

 Vertical list of items can be used inside a navbar a submenu

 Markup:
 <ul class="b-list--reset bl-menu">
      <li>
          something
      </li>
      <li>
          <a href="#"> link </a>
      </li>
 </ul>

 #{$namespace}menu
==============================================================================*/

#{$namespace}menu{
    border: 1px solid;
}



#{$namespace}menu__item{
    border-bottom: 1px solid;
    &:last-of-type{
        border-bottom: none;
    }

    > a {
        display: block;
        padding: .5em;
    }

}