/* WKND Navigation - Mobile */

@nav-item-mobile-top-level-color: #fff;
@nav-item-mobile-hover-color: @brand-primary;
@nav-item-mobile-text-color: #888;
@nav-item-mobile-border : solid 1px rgba(255, 255, 255, 0.05);
 
.cmp-navigation--mobile {
     
  .cmp-navigation__group {
      list-style: none;
      display: inline-block;
      margin: 0;
      padding: 0;
  }
 
  .cmp-navigation__item {
      display: inline-block;
      float: left;
      width: 100%;
  }
 
  .cmp-navigation__item-link {
    display: block;
    color: @nav-item-mobile-text-color;
    text-decoration: none;
    height: 44px;
    line-height: 44px;
    border-top: @nav-item-mobile-border;
    padding: 0 1em 0 1em;
     
    &:hover {
        color: @nav-item-mobile-hover-color;
    }
  }
 
  .cmp-navigation__item--level-0, .cmp-navigation__item--level-1 {
   
          > .cmp-navigation__item-link {
              color: @nav-item-mobile-top-level-color;
               
              &:hover {
                  color: @nav-item-mobile-hover-color;
              }
          }
    }
     
    .cmp-navigation__item--level-2 {
        padding-left: 2em;
    }
     
    .cmp-navigation__item--level-3 {
        padding-left: 4em;
    }
}
 
 
     #mobileNav, #toggleNav {
        display: none;
    }
     
    /*Styles to push mobile nav into view */
     
    @media (max-width: @screen-medium) {
     
    .root.responsivegrid {
                -moz-backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                backface-visibility: hidden;
                -moz-transition: -moz-transform 0.5s ease;
                -webkit-transition: -webkit-transform 0.5s ease;
                -ms-transition: -ms-transform 0.5s ease;
                transition: transform 0.5s ease;
                padding-bottom: 1px;
    }
     
    #toggleNav {
                -moz-backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                backface-visibility: hidden;
                -moz-transition: -moz-transform 0.5s ease;
                -webkit-transition: -webkit-transform 0.5s ease;
                -ms-transition: -ms-transform 0.5s ease;
                transition: transform 0.5s ease;
                display: block;
                height: 44px;
                left: 0;
                position: fixed;
                top: 6px;
                width: 40px;
                z-index: 10001;
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
            }
            .scrolly {
                #toggleNav {
                    background: #edededa8;
                }
            }
 
                #toggleNav .toggle {
                    width: 80px;
                    height: 60px;
                    font-size: 40px;
                    color: @text-color;
                     
                    &:hover {
                        text-decoration:none;
                        color: @text-color;
                    }
                     
                }
 
            #mobileNav {
                -moz-backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
                -ms-backface-visibility: hidden;
                backface-visibility: hidden;
                -moz-transform: translateX(-275px);
                -webkit-transform: translateX(-275px);
                -ms-transform: translateX(-275px);
                transform: translateX(-275px);
                -moz-transition: -moz-transform 0.5s ease;
                -webkit-transition: -webkit-transform 0.5s ease;
                -ms-transition: -ms-transform 0.5s ease;
                transition: transform 0.5s ease;
                display: block;
                height: 100%;
                left: 0;
                overflow-y: auto;
                position: fixed;
                top: 0;
                width: 275px;
                z-index: 10002;
                color: #858484;
                background: #000;
                box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.35);
            }
             
             
            body.navPanel-visible {
                overflow-x: hidden;
                 
                .root.responsivegrid {
                    -moz-transform: translateX(290px);
                    -webkit-transform: translateX(290px);
                    -ms-transform: translateX(290px);
                    transform: translateX(290px);
                }
                 
                 #toggleNav {
                    -moz-transform: translateX(275px);
                    -webkit-transform: translateX(275px);
                    -ms-transform: translateX(275px);
                    transform: translateX(275px);
                }
                 
                #mobileNav {
                    -moz-transform: translateX(0);
                    -webkit-transform: translateX(0);
                    -ms-transform: translateX(0);
                    transform: translateX(0);
                }
                 
        }    
    }