@mixin menu-item-style {
  @include flex(row, flex-start, center);

  width: 100%;
  height: getCssVar('app-menu', 'item-height');
  padding: getCssVar('app-menu', 'item-padding');
  font-size: getCssVar('app-menu', 'item-font-size');
  color: getCssVar('app-menu', 'item-color');
  white-space: nowrap;

  &:hover {
    color: getCssVar('app-menu', 'item-hover-color');
  }

  > .ivu-icon {
    margin: 0;
  }
}

@mixin menu-collapse-item-style {
  @include flex-center;

  padding: getCssVar('app-menu', 'collapse-item-padding');

  &:hover {
    color: getCssVar('app-menu', 'collapse-item-hover-color');
  }
}

@mixin menu-item-selected-style {
  color: getCssVar('app-menu', 'item-selected-color');
  background-color: getCssVar('app-menu', 'item-selected-bg-color');
}

@include b(app-menu) {
  position: static;
  height: calc(100vh - getCssVar('layout', 'header-height'));
  overflow-y: auto;
  @include set-component-css-var('app-menu', $app-menu);

  // 图标样式
  @include e(icon) {
    width: getCssVar('app-menu', 'icon-width');
    height: getCssVar('app-menu', 'icon-height');
    margin: getCssVar('app-menu', 'icon-margin');
  }

  // 收缩
  @include when(collapse) {
    @include e(item) {
      @include menu-collapse-item-style;
    }
    @include b(app-menu-tooltip) {
      width: 100%;
    }
    @include b(app-menu-submenu) {
      display: block;
      @include e(title) {
        @include flex-center;
        @include menu-collapse-item-style;

        white-space: nowrap;
        cursor: pointer;
      }
      @include e(item) {
        padding: 0;
      }
    }

    // 收缩菜单项激活样式 覆盖iview自带
    .ivu-menu-item-active:not(.ivu-menu-submenu) {
      @include menu-item-selected-style;
    }
  }

  &.ivu-menu-vertical.ivu-menu-light::after {
    display: none;
  }

  // 菜单默认样式 覆盖iview自带，自带给的900会高于模态等
  &.ivu-menu,
  .ivu-menu {
    z-index: 5;
  }

  // 菜单项默认样式 覆盖iview自带
  .ivu-menu-item,
  .ivu-menu-submenu-title {
    @include menu-item-style;
  }

  // 未收缩菜单项激活样式 覆盖iview自带
  &.ivu-menu-light.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu) {
    @include menu-item-selected-style;
  }

  &::-webkit-scrollbar {
    width: getCssVar('app-menu', 'scrollbar-width');
    height: 0;
  }

  &::-webkit-scrollbar-thumb {
    background: getCssVar('app-menu', 'scrollbar-bg-color');
  }
}
