$navBg: lighten(desaturate(map_get($palette-primary, 'lighter'), 70%), 1.5%);
$navActiveBg: map_get($palette-primary, 'lighter');

.page-wrapper {
  @extend .pt-4;
  @extend .px-4;
}

// Light
.mat-sidenav.mat-drawer {
  background-color: $navBg;
  border-right: none;

  .mat-drawer-inner-container {
    margin-left: 60px;
  }

  .mat-list-base .mat-list-item .mat-list-item-content {
    padding-left: 24px;
  }

  .mat-list-base .mat-list-item {
    @include textColor($palette-primary, 'default');
    height: 40px;

    &:hover, &:active, &:focus {
      @include textColor($palette-primary, 'default');
      background-color: transparent;
    }
  }
}


.app-nav-section-link {

  .mat-ripple-element {
    opacity: 0;
  }

  .app-nav-section-text {
    font-size: .9rem;
    border-radius: 16px;
    padding: 8px 12px;
  }

  &.active .app-nav-section-text {
    background-color: $navActiveBg;
  }
}


.nav-container {
  display: flex;
  flex-direction: row;

  .nav-section-title {
    font-weight: 600;
    margin: 40px 16px 8px 24px;
  }

  .mat-nav-list {
    padding-top: 0;
  }

  .nav-ribbon {
    position: fixed;
    width: 60px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 1rem .5rem;
    background-color: $light-background;
    box-shadow:  6px 0 5px transparentize(darken($navBg, 20%), 0.8);

    [mat-icon-button] {
      height: 36px;
      width: 36px;
      line-height: 36px;
      margin: 6px 0;

      mat-icon {
        margin-top: -4px;
      }

      &.active {
        @include bgColor($palette-primary, 'default');
        color: $fg-0;
      }
    }

    .logo--plates {
      width: 56px;
      margin-left: -.5rem;
    }
  }
}

.nav-ribbon-group {
  display: flex;
  flex-direction: column;
}


//// Dark
//.mat-sidenav.mat-drawer {
//  background-color: $dark-bg-lighter-5;
//
//  .mat-list-base .mat-list-item {
//    color: $light-secondary-text;
//    &:hover {
//      color: $light-text;
//    }
//  }
//}