@use '../core/variables' as *;
@use '../core/mixins' as *;
@use '../core/bootstrap';

#sidenav {
  font-family: $site-font-family-alt;
  @include sidenav-top-position;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 226px;
  border-right: 1px solid #d8d8d8;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;

  .open_menu & {
    z-index: 10000;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
  }
}

.site-sidebar {
  padding: $site-sidebar-top-padding 0 ($site-sidebar-top-padding * 2);

  // Customization for the mobile version of the sidebar.
  &.site-sidebar--header {
    padding: 0;

    > .nav > .nav-item {
      font-size: bootstrap.$font-size-base;
    }

    > .nav > .nav-item,
    > .nav > .nav-item .nav .nav-item {
      .nav-link {
        padding-top: bootstrap.bs-spacer(2);
        padding-bottom: bootstrap.bs-spacer(1);

        &.collapsible {
          padding-bottom: bootstrap.bs-spacer(2);

          &::before {
            top: 6px;
          }
        }
      }
    }
  }

  .sidebar-primary-divider {
    height: 0;
    margin-top: bootstrap.bs-spacer(1);
    margin-bottom: bootstrap.bs-spacer(1);
    overflow: hidden;
    border-top: 1px solid $site-color-light-grey;
  }

  @mixin nav-link-active-style {
    &.active {
      font-weight: bootstrap.$font-weight-bold;

      &:not(.collapsible) {
        color: $site-color-primary;

        &:hover {
          color: $flutter-color-dark-blue;
        }
      }
    }
  }

  @mixin nav-link-not-active-hover {
    &:not(.disabled) {
      &:hover {
        color: $site-color-primary;
      }
    }
  }

  .nav-header {
    font-weight: bootstrap.$font-weight-bolder;
    font-size: bootstrap.$font-size-base;
    user-select: none;
    color: lighten($site-color-body-light, 20%);
  }

  .nav-link {
    font-family: $site-font-family-alt;

    padding: bootstrap.bs-spacer(1) 0;
    position: relative;
    color: inherit;
    &.disabled { opacity: 0.5; }

    @include nav-link-active-style;

    @include nav-link-not-active-hover;
  }

  @mixin collapsible() {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;

    &::after {
      content: 'keyboard_arrow_down';
      font: $site-font-icon;
      transition: transform .25s ease-in-out;
    }

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

  // Top-level nav item
  > .nav, .navbar-nav {
    > .nav-item, > .nav-header {
      padding: 0 $site-sidebar-side-padding;
      font-size: 18px;
    }

    > .nav-item {
      > .nav-link {
        @include nav-link-active-style;

        &.collapsible {
          padding: bootstrap.bs-spacer(2) 0;

          @include collapsible();

          @include nav-link-not-active-hover;
        }

        &:not(.collapsible) {
          padding: bootstrap.bs-spacer(1) 0;
        }
      }

      &:first-child {
        > .nav-link {
          padding-top: 0;
        }
      }
    }

    > .nav-header {
      padding-top: bootstrap.bs-spacer(1);

      & + .nav-item {
        // The first item after a top-level header should have
        // consistent padding, no matter if it's a link or collapsible.
        .nav-link {
          padding-top: bootstrap.bs-spacer(2);
        }
      }
    }
  }

  // Sub navs
  > .nav .nav {
    padding-left: bootstrap.bs-spacer(4);
    margin-bottom: bootstrap.bs-spacer(1);

    .nav-header {
      font-size: bootstrap.$font-size-sm;

      &:not(:first-child) {
        margin-top: bootstrap.bs-spacer(2);
      }
    }

    .nav-item {
      font-size: bootstrap.$font-size-sm;

      > .nav-link {
        color: $site-color-body-light;

        @include nav-link-not-active-hover;
        @include nav-link-active-style;

        &.collapsible {
          &::before{
            content: 'arrow_drop_down';
            font: $site-font-icon;
            left: -24px;
            position: absolute;
            top: 2px;
            transition: transform .25s ease-in-out;
          }

          &.collapsed {
            &::before {
              transform: rotate(-90deg);
            }
          }
        }
      }
    }
  }

  // The top-level navigation items in the mobile sidenav.
  .navbar-nav {
    display: none;

    @media(max-width: 1024px) {
      display: block;
      margin-bottom: 1rem;

      a.nav-link {
        font-size: 20px;
      }

      .sidebar-primary-divider {
        margin-top: $site-sidebar-top-padding;
      }
    }
  }
}
