#mobile-menu {
  border-top: 1px solid @gray-lighter;
  background: @body-bg-color;
  padding-bottom: env(safe-area-inset-bottom);

  .nav-level-1 {
    display: flex;
    align-items: stretch;

    > li {
      flex: 1 1 auto;
      width: 0;
      text-align: center;

      &.active > a,
      &.active > button {
        background: @menu-highlight-color;
        color: @text-color-inverted;
      }

      &:not(.active) a:hover {
        background: @menu-hover-bg-color;
      }

      > a,
      > button {
        font-size: .5em;
        height: 100%;
        padding: .25em;

        // Reset font-size for child elements
        > * {
          font-size: 1/.5em;
        }

        > i {
          display: block;
          font-size: 2.5em;
          opacity: .8;
          line-height: 1.25;

          &:before {
            margin-right: 0;
          }
        }
      }
    }
  }

  .nav-level-2 {
    >li {
      &.selected {
        background: @menu-2ndlvl-active-bg-color;
        color: @menu-2ndlvl-active-color;
      }
    }
  }

  .flyout {
    position: fixed;
    bottom: ~"calc(env(safe-area-inset-bottom) + 3.5em)";
    left: 1em;
    right: 1em;
    font-size: 12em/16;

    &:before {
      right: 10%;
      margin-right: -1.25em;
    }
  }

  button {
    .appearance(none);
    background: none;
    border: none;
    width: 100%;
  }
}

#layout.more-menu-open {
  #mobile-menu .flyout {
    display: block;
  }

  #toggle-more {
    background: @menu-hover-bg-color;
    color: @menu-active-color;
  }
}

// Show #mobile-menu only on mobile
#layout:not(.minimal-layout) #mobile-menu {
  display: none;
}

.nav a:hover {
  text-decoration: none;
}