.nav-wrapper {
  font-family: $special-font-family;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;

  .nav-title{
    color: $base-gray-medium;
    cursor: pointer;
    -webkit-transition: color 150ms ease;
    transition: color 150ms ease;
  }

  .navigation {
    margin: 0;
    overflow: hidden;
    li {
      background: none;
      margin: 0;
      border: 0;
        a {
          color: $base-gray-medium;
          cursor: pointer;
          -webkit-transition: color 150ms ease;
          transition: color 150ms ease;
        }
     }
   }

  // colofy the hovered items
  &:hover .nav-title, .navigation li:hover a{
    color: $base-white;
    font-weight: 400;
  }

  // colofy the active path
  &.is-active{
    .nav-title, .navigation li.is-active a{
      color: $base-white;
    }
  }
}


// toggle states for navigation
.nav-wrapper {
  .navigation {
    max-height: 0;
    -webkit-transition: max-height 200ms ease-out;
    transition: max-height 200ms ease-out;
  }
  &.is-open .navigation{
    max-height: 1000px;
    -webkit-transition: max-height 250ms ease-in;
    transition: max-height 250ms ease-in;
  }
}


// colored sides
.nav-wrapper {
  a::before{
    content: "\f0da";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 5px;
  }
  .nav-title, .navigation li{

    line-height: 20px;
    position: relative;
    width: 100%;

    a, span {
      position: relative;
      padding: 14px 15px 14px 30px;
      display: block;
    }

      &::before{
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        -webkit-transition: width 300ms ease;
        transition: width 300ms ease;
      }
  }

  &:hover .nav-title::before {
    width: 100%;
  }
}

// iterate color list and colofy the sides
@each $current-color in $sidebar-drpdwn-colors {
    $i: index($sidebar-drpdwn-colors, $current-color);

  .nav-wrapper:nth-child(#{$i}){
    .nav-title::before, .navigation li::before {
      background-color: $current-color;
    }
  }
}
