@import "../../style/index.less";

@ui-prefix-menu:yyui-menu;

.ant-menu.@{ui-prefix-menu}{
  &-item:hover,
  &-item-active,
  &-submenu-active,
  &-submenu-title:hover {
    background-color: tint(@primary-color, 90%);
  }
  &-item-selected {
    color: @primary-color;
    // fix chrome render bug
    transform: translateZ(0);
    > a,
    > a:hover {
      color: @primary-color;
    }
  }
  &-inline {
    .ant-menu-selected,
    .ant-menu-item-selected {
      border-right: 2px solid @primary-color;
      transform: translateZ(0);
    }
  }
  &-vertical &-submenu-selected {
    color: @primary-color;
    > a {
      color: @primary-color;
    }
  }
  &-horizontal {
    > .ant-menu-item,
    > .ant-menu-submenu {
      &:hover,
      &-active,
      &-selected {
        border-bottom: 2px solid @primary-color;
        color: @primary-color;
        transform: translateZ(0);
      }
      > a {
        display: block;
        color: @text-color;
        &:hover {
          color: @primary-color;
        }
      }
    }
  }
}


// 暗色主题
.ant-menu.@{ui-prefix-menu} {
  &-dark,
  &-dark &-sub {
    color: #999;
    background: #404040;
  }

  &-dark &-inline&-sub {
    background: #333;
  }

  &-dark&-horizontal {
    border-bottom-color: #404040;
  }

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
    border-color: #404040;
    border-bottom: 0;
    top: 0;
  }

  &-dark &-item,
  &-dark &-item > a {
    color: #999;
  }

  &-dark&-inline,
  &-dark&-vertical {
    border-right: 0;
  }

  &-dark&-inline &-item,
  &-dark&-vertical &-item {
    border-right: 0;
    margin-left: 0;
    left: 0;
  }

  &-dark &-item:hover,
  &-dark &-item-active,
  &-dark &-submenu-active,
  &-dark &-submenu-selected,
  &-dark &-submenu:hover,
  &-dark &-submenu-title:hover {
    background-color: transparent;
    color: #fff;
    > a {
      color: #fff;
      transform: translateZ(0);
    }
  }

  &-dark &-item-selected {
    border-right: 0;
    color: #fff;
    > a,
    > a:hover {
      color: #fff;
    }
  }

  &-dark&-inline &-item-selected {
    background-color: @primary-color;
  }
}