@mixin menu-item-base {
  display: flex;
  position: relative;
  overflow: hidden;
  align-items: center;
  width: 100%;
  min-width: $compact-menu-width;
  height: $menu-item-height;
  margin: 0;
  padding: 0 14px;
  outline: none;
  color: $component-default-color;
  cursor: pointer;
  &:hover,
  &:focus,
  &:active {
    color: $primary-color;
    .#{$prefix}-menu-item-suffix,
    .#{$prefix}-menu-item-prefix {
      color: $primary-color;
    }
  }
  &-disabled {
    color: $component-disabled-color;
    cursor: not-allowed;
    &:hover,
    &:focus,
    &:active {
      color: $component-disabled-color;
    }
  }
  &-content {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
  }
  &-prefix {
    @include item-prefix;
    svg {
      vertical-align: middle;
    }
  }
  &-suffix {
    @include item-suffix;
    svg {
      vertical-align: middle;
    }
  }
}

@mixin item-suffix {
  flex-shrink: 0;
  margin-left: $icon-gutter;
  color: $icon-color;
  // position: absolute;
}
@mixin item-prefix {
  display: inline-block;
  flex-shrink: 0;
  width: auto;
  margin-right: $icon-gutter;
  color: $icon-color;
  text-align: center;
  & > *:first-child {
    margin-right: 10px;
  }
  &-compact {
    width: 100%;
    margin: 0;
  }
}

@mixin ne-menu-item {
  .#{$prefix}-menu-item {
    @include menu-item-base;
    &-selected {
      // .#{$prefix}-menu-item-suffix,
      // .#{$prefix}-menu-item-prefix {
      //   color: $white;
      // }
      background-color: $menu-highlight-bg;
      color: $primary-color;
      .#{$prefix}-menu-item-prefix,
      .#{$prefix}-menu-item-suffix {
        color: $primary-color;
      }
      &:hover,
      &:focus,
      &:active {
        background-color: $primary-color;
        color: #fff;
        .#{$prefix}-menu-item-prefix,
        .#{$prefix}-menu-item-suffix {
          color: #fff;
        }
      }
    }
  }
  .#{$prefix}-menu-title {
    &-selected {
      color: $primary-color;
    }
    &-content {
      user-select: initial;
    }
    &-silent {
      color: $menu-title-color;
      cursor: unset;
      &:hover,
      &:focus,
      &:active {
        color: $menu-title-color;
      }
    }
  }
}