$mobile-nav-width: 200px;

.mobile-only{
  @include medium-large{
    display: none !important;
  }
}
.desktop-only{
  @include small{
    display: none !important;
  }
}

.mobile-nav{
  position:fixed;
  overflow:auto;
  left: -$mobile-nav-width;
  left: calc((100% - 60px) * -1);
  width: $mobile-nav-width;
  width: calc(100% - 60px);
  height: 100%;
  top: 0px;
  bottom: 0px;
  background:#444;
  color:white;
  @include box-shadow(inset -3px 0px 7px black(0.5));
  z-index: 100;
}

.mobile-nav, .inner-wrapper{
  @include single-transition(all, 300ms, ease-out, 0ms);
}

.inner-wrapper{
  position: relative;
  left: 0px;
}

.mobile-nav-open{
  overflow: hidden;
  .mobile-nav{
    left:0px;
  }
  .outer-wrapper{
    overflow:hidden;
    .inner-wrapper{
      left:$mobile-nav-width;
      left: calc(100% - 60px);
    }
  }
}

@mixin header-button{
  display:block;
  background:$red;
  border-radius: 3px;
  &, &:link, &:visited, &:hover{
    color:white;
  }
  height:30px;
  width:40px;
  i{
    position:absolute;
    width:100%;
    text-align:center;
    line-height:30px;
    height:30px;
    font-size:18px;
  }
}

.mobile-menu-button{
  @include header-button;
  @extend %vcenter;
  @include medium-large{
    display: none;
  }
  z-index:100;
  
  span{
    display:none;
  }
  &.menu{
    float:left;
  }
  &.submit{
    float:right;
  }
}


.desktop-nav{
  @include small{
    display: none;
  }
}

.mobile-menu{
  li{
    margin-bottom: 0;
    border-bottom:1px white(0.1) solid;
    &:last-child{
      border:none;
    }
  }
  .sign-in{
    border-bottom:1px white(0.1) solid;
    margin-right: 0px;
  }
  a{
    display: block;
    height: auto;
    line-height: inherit;
    padding: 10px;
    font-size: 15px;
    &, &:link, &:visited{
      color: white;
    }
  }
  .dropdown{
    >a{
      &:after{
        display:inline-block;
        position:relative;
        top:-1px;
        margin-left:4px;
        content:"▼";
        font-size:8px;
      }
    }
  }
  .dropdown-menu{
    li{
      margin-bottom: 0;
      a{
        background: #333;
      }
      border-bottom:1px white(0.1) solid;
    }
  }  
}

.mobile-submit{
  padding: 10px;
  border-bottom:1px white(0.1) solid;
  .button{
    max-width: none;
  }
}