/* Navigation */

.navigation {
  background-color: var(--color-background-page);
}

.navigation[data-scheme="dark"] {
    color: var(--color-text-primary);
    --csstools-color-scheme--light:  ;
    color-scheme: dark;
  }

/* Mobile */

@media (width <= 1044px) {
  :root {
    --navigation-height: 2.9rem;
  }

  .navigation {
    display: grid;

    grid-template-columns: 1fr min-content min-content;

    column-gap: 0.25rem;
    align-items: center;
    justify-items: start;

    height: var(--navigation-height);
  }

    .navigation[data-open="true"] {
      position: fixed;
      inset: 0;
      z-index: 2;

      align-content: start;

      height: auto;

      overflow-y: auto;
    }

  /* Popup */

  .navigation__popup {
    display: none;
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .navigation[data-open="true"] .navigation__popup {
    display: block;
  }

  /* Logo */

  .navigation__logo {
    padding: 0.2rem;
  }

  /* Button */

  .navigation__button {
    padding: 0.7rem;
    margin: 0;

    cursor: pointer;
    outline-offset: -2px;

    background-color: transparent;
    border: none;
  }

    .navigation__button:hover {
      background-color: var(--color-background-secondary);
    }

    .navigation__button::before {
      display: block;

      width: 1.5rem;
      height: 1.5rem;

      content: "";

      background-color: currentcolor;

      mask-size: cover;
    }

    .navigation__button[aria-expanded="true"]::before {
      mask-image: url(//web-static.nodejs.cn/static/client/cancel.7362f2cdf3515e0d.svg);
    }

    .navigation__button[aria-expanded="false"]::before {
      mask-image: url(//web-static.nodejs.cn/static/client/menu.74ccd9bb64dbf543.svg);
    }

  /* Search */
    .navigation__search[data-view="mobile"] {
      display: block;
    }

    .navigation__search[data-view="desktop"] {
      display: none;
    }

  /* User menu */

  mdn-user-menu {
    display: block;
    border-top: 1px solid var(--color-border-primary);
  }
}

/* Desktop */

@media (width > 1044px) {
  :root {
    --navigation-height: 4.125rem;
  }

  .navigation {
    display: grid;

    grid-template-columns: min-content 1fr min-content min-content;

    column-gap: 1rem;
    align-items: center;
    justify-items: center;

    height: var(--navigation-height);

    padding-block: 0.75rem;
    padding-inline: var(--layout-side-padding);
  }

  /* Logo */

  .navigation__logo {
    margin-inline-start: -6px;
  }

  /* Popup */

  .navigation__popup {
    display: contents;
  }

  /* Button */

  .navigation__button {
    display: none;
  }

  /* Search */
    .navigation__search[data-view="mobile"] {
      display: none;
    }

    .navigation__search[data-view="desktop"] {
      display: block;
    }

  /* User menu */

  mdn-user-menu {
    width: 2.125rem;
    height: 2.125rem;
  }
}

/* Navigation */


/*# sourceMappingURL=styles-navigation.css.map*/