@mixin nav-treeview-light(
  $sidebar-bg,
  $sidebar-hover-bg,
  $sidebar-color,
  $sidebar-hover-color,
  $sidebar-active-color,
  $sidebar-submenu-bg,
  $sidebar-submenu-color,
  $sidebar-submenu-hover-color,
  $sidebar-submenu-hover-bg,
  $sidebar-submenu-active-color,
  $sidebar-submenu-active-bg
) {
  // Sidebar background color
  background-color: $sidebar-bg;

  // Sidebar Menu. First level links
  .nav-sidebar > .nav-item {
    // links
    > .nav-link {
      // border-left: 3px solid transparent;
      &:active,
      &:focus {
        color: $sidebar-color;
      }
    }

    // Hover and active states
    &.menu-open > .nav-link,
    &:hover > .nav-link {
      background-color: $sidebar-hover-bg;
      color: $sidebar-hover-color;
    }

    > .nav-link.active {
      color: $sidebar-active-color;
    }

    // First Level Submenu
    > .nav-treeview {
      background-color: $sidebar-submenu-bg;
    }
  }

  // Section Heading
  .nav-header {
    background-color: inherit;
    color: shade-color($sidebar-color, 5%);
  }

  // All links within the sidebar menu
  .sidebar {
    a {
      color: $sidebar-color;

      &:hover {
        text-decoration: none;
      }
    }
  }

  // All submenus
  .nav-treeview {
    > .nav-item {
      > .nav-link {
        color: $sidebar-submenu-color;

        &:hover,
        &:focus {
          background-color: $sidebar-submenu-hover-bg;
          color: $sidebar-submenu-hover-color;
        }
      }

      > .nav-link.active {
        &,
        &:hover {
          background-color: $sidebar-submenu-active-bg;
          color: $sidebar-submenu-active-color;
        }
      }

      > .nav-link:hover {
        background-color: $sidebar-submenu-hover-bg;
      }
    }
  }
}