/*
 * Mobile application navigation
 * One non-wrapping row. When the visible actions no longer fit, the row
 * becomes horizontally scrollable instead of creating a second line.
 */
@media (max-width: 760px) {
  .mobile-nav {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    padding:
      6px max(8px, env(safe-area-inset-right))
      env(safe-area-inset-bottom)
      max(8px, env(safe-area-inset-left));
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;
    align-content: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav::-webkit-scrollbar {
    display: none;
  }

  .mobile-nav .nav-btn {
    width: auto !important;
    min-width: 72px !important;
    min-height: 50px;
    flex: 1 0 72px !important;
    align-self: stretch;
    justify-content: center;
    padding: 0 8px !important;
    scroll-snap-align: center;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .mobile-nav .nav-btn > span {
    display: none !important;
  }

  .mobile-nav .nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }

  /* Leave enough room for the fixed navigation and the device safe area. */
  .workspace {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  main {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .mobile-nav {
    height: calc(60px + env(safe-area-inset-bottom));
    padding-top: 5px;
  }

  .mobile-nav .nav-btn {
    min-width: 68px !important;
    min-height: 46px;
    flex-basis: 68px !important;
  }

  .workspace {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}