/* Base */

/* Tab */

.menu__tab {
  --menu-tab-background: var(--color-background-blue);
  --menu-tab-text: var(--color-text-blue);
}

.menu__tab[data-section="learn"] {
    --menu-tab-icon: url(//web-static.nodejs.cn/static/client/graduation-cap.c7aa0f3430c53718.svg);
    --menu-tab-background: var(--color-background-orange);
    --menu-tab-text: var(--color-text-orange);
  }

.menu__tab[data-section="tools"] {
    --menu-tab-icon: url(//web-static.nodejs.cn/static/client/wrench.a3caa7312a364b47.svg);
    --menu-tab-background: var(--color-background-purple);
    --menu-tab-text: var(--color-text-purple);
  }

.menu__tab[data-section="about"] {
    --menu-tab-background: var(--color-background-green);
    --menu-tab-text: var(--color-text-green);
  }

/* Tab Button */

.menu__tab-button {
  margin: 0;

  font: inherit;

  line-height: var(--font-line-ui);

  color: var(--color-text-primary);

  white-space: nowrap;

  cursor: pointer;

  background-color: transparent;
}

.menu__tab-button:is([aria-expanded="true"],:hover) {
    color: var(--menu-tab-text);
    background-color: var(--menu-tab-background);
  }

/* Arrow & Icon */

.menu__tab-button::before,.menu__tab-button::after {
    width: 1.25rem;
    height: 1.25rem;

    background-color: currentcolor;

    mask-size: cover;
  }

/* Arrow */

.menu__tab-button::after {
    content: "";
    mask-image: url(//web-static.nodejs.cn/static/client/chevron-down.7c923b7054da305b.svg);
  }

.menu__tab-button[aria-expanded="true"]::after {
    scale: -1;
  }

/* Icon */

:is(:is([data-section="learn"],[data-section="tools"]) .menu__tab-button)::before {
      content: "";
      mask-image: var(--menu-tab-icon);
    }

/* Tab Link */

.menu__tab-link {
  /* Custom, to match the icon height */
  line-height: 1.25rem;
  color: var(--color-text-primary);
}

.menu__tab-link:hover {
    color: var(--menu-tab-text);
    background-color: var(--menu-tab-background);
  }

/* Panel */

.menu__panel-title {
  padding: 0.7rem 1.4rem;
  margin: 0;
}

.menu__panel-title a {
    color: inherit;
  }

/* Content */

.menu__panel-content {
  display: grid;
  gap: 1.4rem;
  padding: 1.4rem;
}

.menu__panel-content dl {
    display: grid;

    row-gap: var(--font-size-small);
    align-content: start;

    margin: 0;
  }

.menu__panel-content dt {
    font-size: var(--font-size-small);

    color: var(--color-text-secondary);

    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

.menu__panel-content dd {
    margin: 0;
  }

.menu__panel-content ul {
    display: grid;

    row-gap: 0.5rem;

    padding: 0;
    margin: 0;

    list-style: none;
  }

.menu__panel-content a {
    color: var(--color-text-primary);
    -webkit-text-decoration: none;
    text-decoration: none;
    text-decoration-color: var(--color-text-secondary);
  }

:is(.menu__panel-content a):hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

/* Icon */

.menu__panel-icon {
  display: inline-flex;
  align-items: center;
}

.menu__panel-icon::before {
    display: inline-block;

    width: 1.25rem;
    height: 1.25rem;

    margin-inline-end: 0.5rem;

    content: "";

    background-color: currentcolor;

    mask-size: cover;
  }

.menu__panel-icon[data-icon="circle-play"]::before {
    mask-image: url(//web-static.nodejs.cn/static/client/circle-play.6ed4ac1fb3c93a04.svg);
  }

.menu__panel-icon[data-icon="shield-check"]::before {
    mask-image: url(//web-static.nodejs.cn/static/client/shield-check.07bdc37f20ac5cc6.svg);
  }

.menu__panel-icon[data-icon="mdn-m"]::before {
    mask-image: url(//web-static.nodejs.cn/static/client/mdn-m.70aac857e4a908d0.svg);
  }

.menu__panel-icon[data-icon="chart-no-axes-combined"]::before {
    mask-image: url(//web-static.nodejs.cn/static/client/chart-no-axes-combined.aee09a7064cb8b35.svg);
  }

.menu__panel-icon[data-icon="users"]::before {
    mask-image: url(//web-static.nodejs.cn/static/client/users.f7e6f1f213744762.svg);
  }

.menu__panel-icon[data-icon="github"]::before {
    mask-image: url(//web-static.nodejs.cn/static/client/github.4d94e1bf436aa7ed.svg);
  }

/* Mobile */

@media (width <= 1044px) {
  .menu {
    --menu-button-padding: 0.9rem 0.7rem;
  }

  /* Tab */

  .menu__tab {
    display: grid;
    border-top: 1px solid var(--color-border-primary);
  }

  /* Button */

  .menu__tab-button {
    display: flex;

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

    padding: var(--menu-button-padding);

    border: none;

    /* Arrow */
  }

    .menu__tab-button::after {
      margin-left: auto;
    }

  /* Link */

  .menu__tab-link {
    padding: var(--menu-button-padding);
  }

  /* Label */

  .menu__tab-label {
    order: -1;
  }

    .menu__tab-label[data-type="short"] {
      display: none;
    }

  /* Title */
    .menu__panel-title::after {
      position: relative;
      top: 1rem;

      display: block;

      height: 1px;

      content: "";

      background-color: var(--color-border-primary);
    }

  /* Content */

  /* About */
    .menu__tab[data-section="about"] .menu__panel-content ul {
      row-gap: 1.4rem;
    }
}

/* Desktop */

@media (width > 1044px) {
  .menu {
    --menu-button-padding: 0.5rem 0.7rem;

    position: relative;
    display: flex;
    align-items: center;
  }

  /* Button */

  .menu__tab-button {
    display: flex;

    column-gap: 0.125rem;
    align-items: center;

    padding: var(--menu-button-padding);

    border: 1px solid transparent;
    border-bottom: none;
  }

    .menu__tab-button[aria-expanded="true"] {
      position: relative;
      z-index: 1;
    }

    /* Arrow */

    .menu__tab-button::after {
      margin-right: -4px;
    }

  /* Link */

  .menu__tab-link {
    padding: var(--menu-button-padding);
  }

  /* Label */
    .menu__tab-label[data-type="short"] {
      display: none;
    }

    @media (width <= 1104px) {
      .menu__tab-label[data-type="long"] {
        display: none;
      }

      .menu__tab-label[data-type="short"] {
        display: block;
      }
    }

  /* Panel */

  .menu__panel {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1; /* prevents menu foldout to be drawn below language chooser */

    margin-top: -1px;

    background-color: var(--color-background-page);
    border: 1px solid var(--color-border-primary);
  }

  /* Title */

  .menu__panel-title {
    color: var(--menu-tab-text);
    background-color: var(--menu-tab-background);
  }

  /* Content */

  .menu__panel-content {
    grid-template-columns: repeat(3, 1fr);
  }

  /* HTML CSS */
    :is(.menu__tab[data-section="html"],.menu__tab[data-section="css"]) dl:nth-of-type(2) {
      border-right: 1px solid var(--color-border-primary);
    }

  /* Learn */
    .menu__tab[data-section="learn"] .menu__panel-content dl:nth-of-type(1) {
      grid-column: span 3;
      padding-bottom: 1.4rem;
      border-bottom: 1px solid var(--color-border-primary);
    }

  /* About */
    .menu__tab[data-section="about"] .menu__panel-content ul {
      row-gap: 1.4rem;
    }
}

/* Menu */


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