@mixin menu-item($props: ()) {
  $_height: 46px;

  position: relative;
  height: $_height;
  line-height: $_height;
  padding: 0 40px;
  font-size: $--font-size-base;

  &.is-active {
    &::before {
      content: '';
      position: absolute;
      width: 4px;
      height: 60%;
      width: var(--menu-item-dot-size, 7px);
      height: var(--menu-item-dot-size, 7px);
      left: 5px;
      top: 50%;
      background-color: var(--primary);
      border-radius: var(--menu-item-dot-border-radius, 100%);
      box-shadow: 0 0 12px rgba($--color-primary, 0.5);
      transform: translateY(-50%);
    }
  }

  > .i-menu-icon {
    margin-right: 3px;

    &.is-img {
      width: 20px;
    }
  }

  > .el-tooltip {
    // text-align: center;
    > .i-menu-icon {
      &.is-img {
        width: 20px;
      }
    }
  }

  @content;
}

@mixin menu-item-tag($props: ()) {
  $_props: map-merge(
    (
      content: '',
      color: var(--menu-item-tag-color, #fff),
      backgroundColor: var(--menu-item-tag-bg, #ff9104),
      border: var(--menu-item-tag-border, 1px solid #fff),
      borderRadius: var(--menu-item-tag-border-radius, 8px),
      boxShadow: var(--menu-item-tag-box-shadow, 0 0 8px #ff9104),
    ),
    $props
  );

  > span {
    position: relative;
    display: inline-flex;
    align-items: center;

    &::after {
      content: map-get($_props, 'content');
      display: inline-block;
      height: 16px;
      line-height: 16px;
      padding: 1px 5px;
      color: #ffffff;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      background-color: #ff9104;
      border: map-get($_props, 'border');
      border-radius: map-get($_props, 'borderRadius');
      transform: scale(0.8);
      box-shadow: map-get($_props, 'boxShadow');
    }
  }
}