.mobileNav {
  display: none;
}

@include respond-down(mobile) {
  .mobileNav {
    --mobile-nav-button-gap: var(--space-1);
    --mobile-nav-button-padding-inline: var(--space-2);
    --mobile-nav-button-padding-top: calc(var(--space-2) + (var(--space-1) / 2));
    --mobile-nav-button-padding-bottom: var(--space-2);
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background:
      linear-gradient(to top, color-mix(in srgb, var(--color-canvas) 98%, transparent), color-mix(in srgb, var(--color-canvas) 92%, transparent));
    border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 40%, transparent);
    backdrop-filter: blur(var(--blur-overlay));
    z-index: var(--z-sticky);
  }

  .contextBar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-text-muted);
  }

  .contextServer,
  .contextProject {
    @include text-caption;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contextServer {
    max-width: 45vw;
  }

  .contextProject {
    max-width: 30vw;
  }

  .contextDivider {
    @include text-caption;
    color: var(--color-text-subtle);
  }

	.navGrid {
	  display: grid;
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  gap: var(--space-2);
	}

  .navButton {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: var(--mobile-nav-button-gap);
    padding: var(--mobile-nav-button-padding-top) var(--mobile-nav-button-padding-inline) var(--mobile-nav-button-padding-bottom);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    background: transparent;
    color: var(--color-text-muted);
    transition:
      background 160ms var(--easing-standard),
      color 160ms var(--easing-standard),
      border-color 160ms var(--easing-standard),
      transform 180ms var(--easing-standard);
  }

  .navButton:hover,
  .navButton:focus-visible {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    border-color: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
  }

  .navButton:active {
    transform: translateY(calc(var(--space-1) / 2));
  }

  .navButtonActive {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    border-color: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
    box-shadow: var(--shadow-soft);
  }

  .iconWrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .label {
    @include text-caption;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}