$mobile-nav-width: 200px;

.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;
  }
  &:hover{
    background:white;
    i{
      color:$red;
    }
  }
}

.auth-buttons{
  @include small {
    height: 30px;
    z-index:100;
    margin:0;
    #login-buttons{
      display:block !important;
    }
    .login-link-and-dropdown-list{
      right:0px !important;
      position:static !important;
      #login-dropdown-list{
        right:0px !important;
        margin:0px !important;
      }
      .login-link-text{
        @include header-button;
        @include hide-text;
        height:30px !important;
        padding: 0 !important;
        &:after{
          text-indent: 0px;
          display: block;
          top: 0px;
          content: "\75" !important;
          font-family: 'icomoon' !important;
          position:absolute;
          width:100%;
          text-align:center;
          line-height:30px !important;
          height:30px !important;
          font-size:18px !important;
        }
      }
    }
  }
}


.mobile-nav{
  a{
    display: block;
    height: auto;
    line-height: inherit;
    padding: 10px;
    font-size: 15px;
    border-bottom:1px white(0.1) solid;    
  }  
  .dropdown{
    >a{
      background: #333;
      color: white;
      &:hover{
        color: $red;
      }
      &:after{
        display:inline-block;
        position:relative;
        top:-1px;
        margin-left:4px;
        content:"▼";
        font-size:8px;
      }
    }
  }
  .dropdown-menu{
    li{
      a{
        &:hover{
          background: $red;
          color: white;
        }
      }
      border-bottom:1px white(0.1) solid;
    }
  }  
}

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