/* MazeJam-only chrome. The shared site.css is synced from MazeBenchEngine. */

.nav-link__icon {
  align-items: center;
  display: none;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.nav-link__icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}

@media (max-width: 1080px) {
  .nav-link--leaderboard .nav-link__icon { display: inline-flex; }
  .nav-link--leaderboard .nav-link__label { display: none; }
}

@media (max-width: 900px) {
  .nav-link--blog .nav-link__icon { display: inline-flex; }
  .nav-link--blog .nav-link__label { display: none; }
}

@media (max-width: 760px) {
  .nav-link--build .nav-link__icon { display: inline-flex; }
  .nav-link--build .nav-link__label { display: none; }

  /* The engine hides non-Play links during mobile play; MazeJam keeps the
     complete four-icon site navigation available. */
  body.play-mode .topbar-nav .nav-link.nav-link--build,
  body.play-mode .topbar-nav .nav-link.nav-link--blog,
  body.play-mode .topbar-nav .nav-link.nav-link--leaderboard {
    display: inline-flex;
  }
}

@media (max-width: 620px) {
  .nav-link--play .nav-link__icon { display: inline-flex; }
  .nav-link--play .nav-link__label { display: none; }

  .topbar-nav { gap: 1px; }
  .topbar-nav .nav-link {
    justify-content: center;
    padding-inline: 7px;
  }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 7px; }
  .topbar-nav .nav-link { padding-inline: 5px; }
}