$sidebar-nav-bg-color: #efece5;
$sidebar-nav-font-color: $body-font-color;
$sidebar-nav-font-hover-color: $white;
$sidebar-dropdown-bg-color: #6f695d;
$sidebar-dropdown-mouseout-delay: .5s;
$sidebar-dropdownmenu-arrow-color: rgba(34, 34, 34, 0.3);


@mixin cwui-sidebar-nav {
  .sidebar-nav {
    font-size: rem-calc(14);
    margin-bottom: rem-calc(30);
    margin-left: rem-calc(-($content-wrapper-padding-left));
    margin-top: rem-calc(-($content-wrapper-padding-top));
  }

  .sidebar-nav__section {
    background: $sidebar-nav-bg-color;

    & + & {
      border-top: 2px solid $white;
    }

    &--secondary,
    &--audience-nav {
      background: scale-color($sidebar-nav-bg-color, $lightness: -10%);
    }

    > .menu {
      margin: 0;
      padding: rem-calc(15 0);
    }

    a {
      text-decoration: none;
    }


    a,
    span:not(.file-ext) {
      color: $sidebar-nav-font-color;

      &:hover {
        background: #b45201;
        color: $white;
      }
    }

    span:not(.file-ext) {
      display: block;
    }

    .menu a {
      line-height: 1.5;
    }

    .dropdown.menu a {
      background: transparent;
    }

    .dropdown.menu > li:not(.active) a:hover {
      background-color: #b45201;
    }

    .dropdown.menu a,
    li > span {
      padding: rem-calc(7 30);
    }

    li.active > a {
      background: initial;
      color: $sidebar-nav-font-color;
      font-weight: bold;
    }

    li.active.is-submenu-item > a {
      color: $white;
    }


    li.divider {
      border-bottom: 1px solid scale-color($sidebar-nav-bg-color, $lightness: -10%);
    }
  }

  .sidebar-nav .dropdown.menu .is-active > a,
  .sidebar-nav .dropdown.menu .is-active > span {
    background: #b45201;
    color: #fff;
  }


  .sidebar-nav .submenu {
    background: $sidebar-dropdown-bg-color;

    .dropdown {
      background: scale-color($sidebar-dropdown-bg-color, $lightness: -40%);
    }

    li.divider {
      border-color: scale-color($sidebar-dropdown-bg-color, $lightness: -20%);

      & ul & {
        border-color: scale-color($sidebar-dropdown-bg-color, $lightness: 20%);
      }
    }

    a,
    li > span {
      color: $white;
    }
  }

  .sidebar-nav .submenu .submenu {
    background: #433f38;
  }

  // Dropdown Menu Arrow
  // ------------------------------------------------------------

  .sidebar-nav {

    .is-dropdown-submenu-parent span::after {
      position: absolute;
      top: 50%;
      left: auto;
      right: 5px;
      margin-top: -1 * $dropdownmenu-arrow-size;
    }

    .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after,
    .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > span::after,
    .dropdown.menu.vertical > li.opens-right > a::after {
      border-color: transparent transparent transparent $sidebar-dropdownmenu-arrow-color;
    }

    .dropdown.menu.vertical > li span::after {
      right: 14px;
    }

    .dropdown.menu.vertical li.opens-right > span::after {
      @include css-triangle($dropdownmenu-arrow-size, $sidebar-dropdownmenu-arrow-color, right);
    }

    .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
      margin-top: -6px;
    }
  }
}