/* header (sidenav) */
aside{
  background-color:var(--background);
  color:var(--foreground);
  padding:35px 20px 20px 20px;
  width:220px;
  box-shadow:var(--shadow);
  overflow-x:hidden;
  overflow-y:auto;
  transition:left var(--ux-speed), width var(--ux-speed), padding var(--ux-speed);
}
aside .canapi-logo-container{
  margin-bottom: 50px;
}
aside #canapi-logo,
.canapi-logo{
  background-image: url('../img/canapi-logo.png');
  /* width: 100%; */
  width: 125px;
  height: 40px;
  /* margin-bottom: 50px; */
  background-position: top left;
}

/* nav */
.nav-item{
  /* margin-bottom:10px; */
  border-radius:4px;
  padding:10px;
  text-decoration:none;
  font-weight:normal;
  color:inherit;
  opacity:1;
  user-select: none;
  /* position:relative; */
}
.nav-item .icon-container{
  margin-right:10px;
  position:relative;
  font-size:1.2em;
  transition:margin-right var(--ux-speed);
}
.nav-item i{
  /* position:absolute */
}
.nav-item span{
  transition:opacity var(--ux-speed);
}
.nav-item i[class*="-bold"]{
  display:none;
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover{
    background-color:var(--accent-green-light-trans);
    color:inherit;
  }
}
.nav-item:active{
  color:inherit;
  opacity: 1;
  transform: scale(.97);
  background-color:var(--accent-green-trans);
}

/* selected */
.nav-item.selected{
  background-color:var(--accent);
  color:var(--white);
  font-weight:bold;
}
.nav-item.selected i{
  display:none;
}
.nav-item.selected i[class*="-bold"]{
  display:flex;
}

/* bottom side nav */
#account-info-container{
  margin-top:30px;
  border-top:1px solid var(--grey);
  padding-top:20px;
}
.username-container{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color:inherit;
  /* transition:opacity .15s; */
}
.username-container:hover,
.username-container:active{
  color:inherit;
}
#logout-link{
  transition:all var(--ux-speed);
  overflow:hidden;
  margin-left:10px;
}

/* minimized sidenav */
aside:not(.show){
  width:48px;
  padding-left:6px;
  padding-right:6px;
}
aside:not(.show) .mobile-menu-toggle{
  display:none;
}

/* menu toggle (technically inside the page-container */
.page-container .mobile-menu-toggle-container{
  opacity:0;
  pointer-events:none;
  transition: opacity var(--ux-speed);
  font-size:1.5rem;
  padding-top:40px;
}
.padded-section.mobile-menu-toggle-container{
  padding-bottom:0;
}
aside:not(.show) ~ .page-container .mobile-menu-toggle-container{
  opacity:1;
  pointer-events:all;
}
/* ____________ */


aside:not(.show) #canapi-logo{
  background-image: url('../img/canapi-favicon.png');
  width:100%;
  background-position: center;
}
aside:not(.show) .nav-item .icon-container{
  margin-right:0;
}
aside:not(.show) .nav-item span{
  opacity:0;
}
aside:not(.show) .username-container{
  opacity:0;
}
aside:not(.show) .avatar{
  margin-right:0;
}
aside:not(.show) #account-info-container{
  /* flex-wrap:wrap; */
}
aside:not(.show) #logout-link{
  opacity:0;
  width:0;
}


/* +++++++++++++++++++++++++++++++++++++++++++ */


/* responsive styles */
/* tablet */
@media only screen and (max-width:930px){
  aside{
    /* width:180px; */
  }
}
/* mobile */
@media only screen and (max-width:768px){
  /* aside:not(.show){} */
  aside:not(.show){
    /* padding:15px; */
    padding-left:0;
    padding-right:0;
    /* padding: revert 0 revert 0; */
    /* padding:0; */
    width:0;
    overflow-x:hidden;
  }
  aside:not(.show) #canapi-logo{
    background-image: revert;
    /* background-image:url('../img/canapi-logo.png'); */
  }
  
  aside.show{
    width:100vw;
  }
  aside .nav-item .icon-container{
    font-size:1.2em;
  }
  aside .canapi-logo-container{
    margin-bottom:33px;
  }
  aside #canapi-logo{
    height: 30px;
  }

  .page-container .mobile-menu-toggle-container{
    position:fixed;
    /* transition:padding var(--ux-speed); */
    bottom:1rem;
    right:2rem;
    border-radius:50%;
    background-color:var(--background);
    padding:1rem;
    box-shadow:var(--shadow);
    z-index:98;
  }
}