//menu color theme

@mixin theme($menuBgColor,$menuBorderColor,$fontColor,$fontColorHover,$menuItemBgColorHover,$fontColorActive,$menuItemBgColorActive,$borderRightColorActive,$subMenuBgColor,$menuItemGroupColor) {
  &.menu {
    background-color: $menuBgColor;
    &:after {
      background-color: $menuBorderColor;//菜单边框颜色
    }
  }

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

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

  .menu__submenu .menu {
    background-color: $subMenuBgColor;
  }

  //选中状态
  .menu__item--checked{
    color: $fontColorActive;
    background-color: $menuItemBgColorActive;
    border-color: $borderRightColorActive;

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

  // 子级有选中，父级标识
  .menu__submenu--checked > .menu__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%);
  }

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

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

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

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

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