//nav-theme color theme

@mixin nav-theme($menuBgColor, $menuBorderColor, $fontColor, $fontColorHover, $menuItemBgColorHover, $fontColorActive, $menuItemBgColorActive, $borderRightColorActive, $subMenuBgColor, $menuItemGroupColor) {
  &.navs {
    background-color: $menuBgColor;

    &::after {
      background-color: $menuBorderColor;//菜单边框颜色
    }
  }

  .navs__item-group {
    &-title {
      color: $menuItemGroupColor;
    }
  }

  .navs__item,
  .navs__submenu-title {
    @include hover-focus {
      color: $fontColorHover;
      background-color: $menuItemBgColorHover;
    }
    color: $fontColor;
  }

  .navs__submenu .navs {
    background-color: $subMenuBgColor;
  }

  //选中状态
  .navs__item--checked {

    @include hover-focus {
      color: $fontColorActive;
      background-color: $menuItemBgColorActive;
    }
    color: $fontColorActive;
    background-color: $menuItemBgColorActive;
    border-color: $borderRightColorActive;
  }

  // 子级有选中，父级标识
  .navs__submenu--checked > .navs__submenu-title {
    color: $fontColorActive;
    background-image: linear-gradient(to bottom, $menuItemBgColorActive 0%, $menuItemBgColorActive 100%), linear-gradient(to bottom, $subMenuBgColor 0%, $subMenuBgColor 100%), linear-gradient(to bottom, $menuBgColor 0%, $menuBgColor 100%);
  }

  // 展开
  .navs--open .navs__submenu-title {
    @include hover-focus {
      background-color: $menuItemBgColorHover;
    }
  }

  // 向下展开
  .navs--open > .navs__submenu-title {
    background-color: $subMenuBgColor;
  }

  .navs--open .dropdown__navs {
    background-image: linear-gradient(to bottom, $subMenuBgColor 0%, $subMenuBgColor 100%), linear-gradient(to bottom, $menuBgColor 0%, $menuBgColor 100%);
  }

  // 向右展开
  .navs--open.dropright > .navs__submenu-title {
    background-color: $menuItemBgColorHover;
  }

  .navs--open.dropright .dropdown__navs {
    background-image: linear-gradient(to bottom, $menuBgColor 0%, $menuBgColor 100%);
  }
}