@use '../base/mixins';

$sidenav-wide-layout: 1024px;

#sidenav {
  margin: 0;
  //overflow-y: auto;
  min-width: 16rem;
  height: 100%;
  min-height: calc(100vh - var(--site-header-height));
  padding: 0.75rem 0.75rem 3rem;
  position: sticky;
  top: var(--site-header-height);
  scrollbar-width: thin;

  display: none;
  width: 100%;
  background-color: var(--site-base-bgColor);
  z-index: 100;

  @at-root body.open_menu {
    #sidenav {
      display: block;
    }

    // Only hide page content if menu is open and in narrow layout.
    #page-content {
      display: none;
    }
  }

  @media (min-width: $sidenav-wide-layout) {
    display: block;
    width: 16rem;
    height: calc(100vh - var(--site-header-height));
    overflow-y: auto;

    border-right: 0.1rem solid var(--site-outline-variant);
    background: none;

    @at-root body.open_menu #page-content {
      display: flex;
    }
  }

  .nav-header {
    font-weight: bolder;
    padding: 0.25rem 0.4rem 0;
    color: var(--site-base-fgColor-lighter);
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: none;
  }

  .sidenav-divider {
    background-color: var(--site-outline-variant);
    border-radius: 0.5rem;
    width: 100%;
    height: 0.125rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  li {
    margin: 0;
    padding: 0;
    font-size: 0.925rem;
    line-height: 1.25rem;
    width: 100%;
    user-select: none;

    .nav-header:not(:first-child) {
      margin-top: 0.5rem;
    }

    a.nav-link, button.nav-link {
      background: none;
      border: none;
      text-wrap: pretty;
      text-align: left;
      padding: 0.25rem 0.4rem;
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;

      border-radius: 0.25rem;

      display: flex;
      flex-direction: row;
      width: 100%;
      align-items: center;
      justify-content: space-between;

      cursor: pointer;

      color: var(--site-base-fgColor);
      font-family: var(--site-ui-fontFamily);
      text-decoration: none;

      &:focus-visible {
        outline: 2px solid var(--site-primary-color);
      }

      > div {
        display: inline-block;

        .material-symbols {
          font-size: 0.825rem;
          margin-left: 0.125rem;
          color: var(--site-base-fgColor-alt);
        }
      }

      span {
        vertical-align: middle;
      }

      .expander {
        color: var(--site-base-fgColor-lighter);
        transition: transform .3s ease-in-out;
      }

      + ul {
        display: none;
      }

      &:hover {
        @include mixins.interaction-style(3%);
      }

      &:active {
        @include mixins.interaction-style(5%);
      }

      &:not(.collapsed) {
        .expander {
          transform: rotate(180deg);
        }

        + ul {
          display: block;
        }
      }

      &.active {
        background-color: rgb(var(--site-interaction-base-values) / 4%);

        &:not(.collapsible) {
          color: var(--site-link-fgColor);
        }
      }
    }
  }

  > ul {
    // Only apply styles to top-level entries.
    > li {
      font-size: 1rem;
    }

    ul {
      margin-left: 0.675rem;
    }
  }

  .navbar-nav {
    display: block;

    a.nav-link {
      font-size: 1.125rem;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      padding: 0.375rem 0.6rem;
    }

    // Hide items from top navbar in wide layout to avoid duplication.
    @media (min-width: $sidenav-wide-layout) {
      display: none;
    }
  }

  .site-header-search {
    display: flex;

    // Hide search from top navbar in wide layout.
    @media (min-width: $sidenav-wide-layout) {
      display: none;
    }
  }
}
