@import "./nav-tree.css";
@import "./search.css";

.nav-wrapper {
  display: none;
}

.nav-icon {
  opacity: 0;
  transform: scale(0.5);
  position: absolute;
  transition:
    opacity var(--theme-transition),
    transform var(--theme-transition);
}

.nav-icon.active {
  opacity: 1;
  transform: scale(1);
  position: relative;
}

.nav-toggle {
  position: unset;
  height: 24px;
  font-size: 1.614rem;
  overflow-y: scroll;
  max-height: 500px;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

  &:hover {
    cursor: pointer;
  }

  & .nav-items {
    position: absolute;
    z-index: 11;
    overflow: hidden;
    top: 2.5rem;
    left: -24rem;
    height: calc(100svh - 2.5rem);
    font-size: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: hsla(var(--overlay-bkg));
    border-right: 1px solid hsl(var(--overlay-bkg-border));

    &::-webkit-scrollbar {
      display: none;
    }

    transition:
      left 0.3s ease,
      padding 0.3s ease;

    &.shown {
      display: flex;
      flex-direction: column;
      left: -1rem;
    }

    & .navtree {
      /* lines up with non overlay nav */
      padding: 0rem 0.618rem;

      height: 100%;
      width: 21rem;
      box-sizing: content-box;
      overflow-y: scroll;
      scrollbar-width: none;
      -ms-overflow-style: none;
      margin-bottom: 1rem;
      text-wrap: nowrap;
    }
  }
}

.link-outside {
  width: 100%;
  height: 100%;
  text-align: start;
}

@media not (min-width: 40rem) {
  .nav-toggle .nav-items {
    top: 2.6rem;
    left: calc(-3rem + -80svw);
    font-size: 1.2rem;

    & .navtree {
      width: 80svw;
    }
  }
}

@media (min-width: 85rem) {
  .dim-content-nav .docslayout-root {
    filter: brightness(100%) !important;
    pointer-events: initial !important;
  }

  .nav-wrapper-mobile {
    display: none;
  }

  .nav-wrapper {
    display: block;
    width: 21rem;
    position: sticky;
    top: 3.5rem;
    flex-shrink: 0;
    overflow-y: scroll;
    max-height: calc(100svh - 3.5rem);
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 10;
  }

  .navtree {
    width: 100%;
    z-index: 1;
    margin: 0.5rem 0;
  }
}
