@layer reset, tokens, base, components, responsive, utilities;

@layer components {
  .mobile-nav {
    position: fixed;
    z-index: var(--z-mobile-nav);
    left: calc(var(--safe-left) + var(--mobile-nav-inset));
    right: calc(var(--safe-right) + var(--mobile-nav-inset));
    bottom: var(--mobile-nav-bottom);
    padding: var(--mobile-nav-pad);
    border-radius: var(--radius-pill);
    background-color: rgb(var(--rgb-canvas-deep) / 0.94);
    box-shadow:
      0 0 0 1px rgb(var(--rgb-white) / 0.09),
      0 14px 32px -10px rgb(0 0 0 / 0.75),
      0 2px 10px rgb(0 0 0 / 0.4);
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .mobile-nav {
      background-color: rgb(var(--rgb-canvas-deep) / 0.78);
      -webkit-backdrop-filter: blur(18px) saturate(1.25);
      backdrop-filter: blur(18px) saturate(1.25);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .mobile-nav {
      background-color: rgb(var(--rgb-canvas-deep) / 0.97);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  .mobile-nav__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    gap: 2px;
  }

  .mobile-nav__list > li {
    display: flex;
  }

  .mobile-nav__item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 56px;
    min-height: calc(var(--mobile-nav-h) - 2 * var(--mobile-nav-pad));
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--fs-badge);
    font-weight: var(--fw-semibold);
    line-height: 1;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--motion-micro) linear,
      color var(--motion-micro) linear,
      box-shadow var(--motion-micro) linear,
      transform var(--motion-micro) var(--ease-enter);
  }

  .mobile-nav__item svg {
    flex: none;
    width: 24px;
    height: 24px;
    transition: color var(--motion-micro) linear;
  }

  .mobile-nav__item[aria-current] {
    color: var(--color-text-primary);
    background-color: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px rgb(var(--rgb-primary) / 0.3);
  }

  .mobile-nav__item[aria-current] svg {
    color: var(--color-primary-accessible);
  }

  .mobile-nav__item:active {
    transform: scale(0.96);
    background-color: rgb(var(--rgb-white) / 0.12);
    transition-duration: var(--motion-instant);
  }

  .mobile-nav__item:focus-visible {
    outline-offset: -3px;
  }
}

@layer responsive {
  @media (min-width: 640px) {
    .mobile-nav {
      display: none;
    }
  }

  @media (max-width: 639.98px) {
    html {
      scroll-padding-bottom: calc(var(--mobile-nav-reserve) + var(--space-3));
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .mobile-nav__item:hover {
      color: var(--color-text-primary);
    }
  }
}