@import "../../animations";
@import "../../variables";

$articleList-background-color: lighten($nav-background-color, 8);

.cxb-sidenav{
   height: 100%;
   overflow: hidden;
}

.cxb-sidenavtopics{
   display: flex;
   flex-direction: column;
   overflow: hidden;

   max-height: 50%;
   //min-height: fit-content;
   //flex: 1;

   transition-property: all;
   transition-duration: .7s;
   transition-timing-function: ease;

   &.cxs-collapsed{
      min-height: 0;
      max-height: 0;
   }
 }

.cxb-list.cxm-sidenav {
   background: white;

   :hover:not(.css-expanded){
      border-bottom-color: $nav-selected-color;
   }
   .cxe-list-item {
      padding: 0;
      position: relative;
   }

   &:focus {
      outline: none;
   }

   a:focus {
      outline: none;
   }
}

.cxb-list.cxm-sidenavarticles{
   display: block;
   background-color: $articleList-background-color;
   height: 100%;
   animation: .4s ease-out 0s 1 slideInFromLeft;

   i {
      display: inline-block;
      margin-right: 3px;
   }

   .cxe-list-item {
      padding: .5rem .3rem;
      position: relative;
   }

   &:focus {
      outline: none;
   }

   a:focus {
      outline: none;
   }
}

.cxe-list-item-articleGroup{
   background-color: $articleList-background-color !important;
   padding: 0 0 .2rem 0 !important;
}

.cxe-lockHide{
   cursor: pointer;
   padding-right: 5px;
   color: $base-font-color-light;
   opacity: .8;
   &:hover{
      opacity: 1;
   }
}

.csb-sidenavtopic {
   padding: .5rem .8rem;
   display: block;
   border-bottom: 1px solid white;
   text-transform: uppercase;
   font-size: .75rem;
   background: $nav-background-color;
   font-weight: bolder;
   transition: border-bottom-width .2s, font-weight .2s;
   transition-timing-function: linear;

   &.css-expanded {
      border-bottom-width: 4px;
      //border-bottom-color: darken($base-border-color, 30);
      border-bottom-color: $nav-selected-color;
      //.cxb-list.cxs-focused & {
      //   //border-bottom-color: $base-blue-color;
      //}
   }
   &.cxs-sidenavtopic-active{
      padding: 0 .4rem 0.3rem .4rem;
      animation: .2s ease-out 0s 1 slideInFromTop;
   }
}

.cxb-link.cxm-sidenav {
   text-decoration: none;
   color: $base-font-color;
   padding: .3rem;
}

.cxe-articlegroup{
   padding: 0 .3rem;
}

.cxb-flexbox.cxm-articlegrouptitle{
   background-color: darken($base-back-color, 5);
   padding: .4rem;
   &:hover{
      font-weight: bold;
      .cxe-expandGlyph{
         opacity: 1;
      }
   }

   .cxe-expandGlyph{
      color: $base-font-color-light;
      opacity: .8;
   }
}

.cxe-modules-header{
   padding: .5rem .7rem;
   background-color: darken($nav-background-color, 5);
   width: 100%;
   font-weight: bolder;
   text-transform: uppercase;
   &:hover{
      background-color: darken($nav-background-color, 2);
   }
}

.cxs-glyph-article{
   font-size: 15px;
   color: $base-font-color-light;
}