/* Mobile menu
   ========================================================================== */
.mobile-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: $mobile-menu-bg;
  &__header {
    display: flex;
    border-bottom: 1px solid $border-color;
  }
  &__back,
  &__open {
    @include nav__link;
    background: none;
    border: none;
    cursor: pointer;
    &:focus {
      outline: none;
    }
  }
  &__back {
    border-right: 1px solid $border-color;
    display: none;
    &.show {
      display: block;
    }
  }
  &__open {
    border-left: 1px solid $border-color;
  }
  &__title {
    display: block;
    flex-grow: 1;
    line-height: 20px;
    padding: 10px 15px;
    text-align: center;
    font-weight: bolder;
  }
  &__panels {
    position: relative;
    overflow: hidden;
    flex-grow: 1;
  }
  &__panel {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: $mobile-menu-bg;
    transition: $mobile-menu-transition;
    &.open {
      left: 0;
    }
  }
  &__item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid $border-color;
  }
  &__link {
    @include nav__link;
    flex-grow: 1;
  }
  &--sub {
    display: none;
    flex: 0 0 100%;
    border-bottom: none;
  }
  &__item.open {
    & > .mobile-menu__link {
      display: none;
    }
    & > .mobile-menu {
      display: block;
    }
  }
}