@mixin sidebar_toggle_icon {
  & > span {
    transition: all .3s ease 0s;
    @extend .fa-angle-down;
    &:before {
      font-size: 1em;
      line-height: 18px;
      vertical-align: middle;
    }
  }
  &.active > span {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }
}

.nav_accordion {
  color: $accordionBaseFontColor;
  margin: 0px 0px;
  dt, dd {
    line-height: 18px;
    h4 {
      padding: .5em 0 .3em 0;
      margin: 0 1.2em .5em 1.2em;
      border-bottom: 3px solid $accordionSubBorderColor;
      font-size: $font-size-base;
      line-height: $line-height-base;
      color: $accordionSubHeaderFontColor;
      font-weight: bold;
      text-rendering: optimizelegibility;
      cursor: pointer;
      @include sidebar_toggle_icon();
      transition: all .3s ease 0s;
      &:hover{
        border-color: darken($accordionSubBorderColor, 10%)
      }
    }
    ul {
      list-style: none outside none;
      margin: 0;
      padding: 0;
    }
    li {
      &:not(:first-child) a {
        margin-top: .2em;
      }
      &:not(:last-child) a {
        margin-bottom: .2em;
      }
      a {
        color: $accordionItemFontColor;
        padding: .7em 1.2em;
        outline: none;
        text-decoration: none;
        display: block;
        text-align: right;
        transition: all .3s ease 0s;
        &.active, &:hover {
          color: $accordionHighlightColor;
        }
        &.active {
          background: $accordionItemActiveBgColor;
          border-top: 1px solid $accordionBorderColor;
          border-left: 4px solid $accordionHighlightColor;
          border-bottom: 1px solid $accordionBorderColor;
          -webkit-box-shadow: -3px 2px 6px -3px $accordionBoxShadowColor;
          box-shadow: -3px 3px 6px -3px $accordionBoxShadowColor;
        }
      }
    }
  }
  dd {
    padding: 0;
    border-bottom: 1px solid $accordionHeaderBorderColor;
    div {
      &:first-child h4 {
        margin-top: .5em;
      }
      &:last-child h4:not(.active) {
        margin-bottom: 1em;
      }
    }
  }
  dt {
    &:first-child { border-top: 1px solid $accordionHeaderBorderColor; }
    border-bottom: 1px solid $accordionHeaderBorderColor;
    padding: .5em 1.2em;
    max-width: 231px;
    cursor: pointer;
    @include sidebar_toggle_icon();
    transition: all .3s ease 0s;
    &.active {
      background-color: $accordionHeaderActiveColor;
    }
    &:hover{
      background-color: darken($accordionHeaderActiveColor, 3%)
    }
  }
}
