toggle-width = 25px
toggle-height = toggle-width * 0.8
toggle-line = 2px
transition-duration = 0.4s
lang-select-height = 40px

#mobile-nav
  position: fixed
  top: 0
  width: mobile-nav-width
  left: @width * -1
  height: 100%
  background: color-navy
  transition: transition-duration
  font-family: font-title
  .mobile-nav-on &
    transform: translateX(100%)

#mobile-nav-inner
  overflow-y: auto
  padding: 10px 0
  position: absolute
  top: 0
  bottom: lang-select-height
  left: 0
  right: 0
  -webkit-overflow-scrolling: touch

#mobile-nav-toggle
  position: absolute
  top: 0
  bottom: 0
  left: gutter-width
  width: toggle-width
  height: toggle-height
  margin: auto
  opacity: 0.5
  cursor: pointer
  transition: 0.2s
  &:active, .mobile-nav-on &
    opacity: 1
  @media mq-normal
    display: none

.mobile-nav-toggle-bar
  background: #fff
  position: absolute
  left: 0
  width: 100%
  height: toggle-line
  transition: transition-duration
  transform-origin: 0
  border-radius: toggle-line
  &:first-child
    top: 0
    .mobile-nav-on &
      transform: rotate(45deg)
  &:nth-child(2)
    top: (toggle-height - toggle-line) * 0.5
    .mobile-nav-on &
      opacity: 0
  &:last-child
    top: toggle-height - toggle-line
    .mobile-nav-on &
      transform: rotate(-45deg)

.mobile-nav-link
  color: #fff
  text-decoration: none
  display: block
  padding: 10px 15px
  line-height: 1
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.mobile-nav-title
  color: color-link
  font-weight: bold
  padding: 10px 15px
  line-height: 1
  display: block
  border-top: 1px solid #444
  margin-top: 10px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

#mobile-lang-select-wrap
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  background: color-navy
  border-top: 1px solid #444

#mobile-lang-select-label
  line-height: lang-select-height
  color: #fff
  padding: 10px 15px
  i
    opacity: 0.7
  span
    padding-left: 8px

#mobile-lang-select
  -webkit-appearance: menulist-button
  opacity: 0
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

#container
  transition: transition-duration
  height: 100%
  // overflow: auto
  -webkit-overflow-scrolling: touch
  .mobile-nav-on &
    transform: translateX(mobile-nav-width)
    overflow: hidden

#mobile-nav-dimmer
  position: absolute
  top: 0
  left: 100%
  height: 100%
  background: #000
  opacity: 0
  transition: opacity transition-duration, transform 0s transition-duration
  .mobile-nav-on &
    width: 100%
    opacity: 0.7
    transform: translateX(-100%)
    transition: opacity transition-duration