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

@mixin theme($name, $background, $color, $hover-background ,$hover-color, $active-background, $active-color, $open-background) {
  &.is-#{""+$name} {
    background: $background;

    .el-menu {
      background: $background;
    }

    .el-menu-item, .el-submenu__title {
      height: 40px;
      line-height: 40px;
      color: $color !important;

      &:focus {
        background: $hover-background !important;
      }

      &:hover {
        background: $hover-background !important;
        color: $hover-color !important;
      }

      &.is-active {
        background-color: $active-background !important;
        color: $active-color !important;
      }

      .el-submenu__icon-arrow {
        color: $color;
      }
    }

    .el-submenu {
      &.is-opened {
        > .el-menu {
          background: $open-background;
        }
      }

      &.is-active {
        > .el-submenu__title {
          color: $--x-menu-dim-active-color !important;
        }
      }
    }
  }
}

@include b(menu) {
  border: none !important;
  @include theme(dark,
          $--x-menu-dark-background,
          $--x-menu-dark-color,
          $--x-menu-dark-hover-background,
          $--x-menu-dark-hover-color,
          $--x-menu-dark-active-background,
          $--x-menu-dark-active-color,
          $--x-menu-dark-open-background
  );

  @include theme(dim,
          $--x-menu-dim-background,
          $--x-menu-dim-color,
          $--x-menu-dim-hover-background,
          $--x-menu-dim-hover-color,
          $--x-menu-dim-active-background,
          $--x-menu-dim-active-color,
          $--x-menu-dim-open-background
  );

  @include theme(grey,
          $--x-menu-grey-background,
          $--x-menu-grey-color,
          $--x-menu-grey-hover-background,
          $--x-menu-grey-hover-color,
          $--x-menu-grey-active-background,
          $--x-menu-grey-active-color,
          $--x-menu-grey-open-background
  );

  .x-icon {
    margin-right: 5px;
    display: inline-table !important;
  }
  .el-submenu .el-menu-item {
    height: 34px;
    line-height: 34px;
  }
  .el-submenu__title {
    font-size: 14px !important;
  }
  .el-menu-item {
    > span {
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100%;
      display: inline-block;
      overflow: hidden;
      font-size: 14px !important;
    }
  }
  .el-badge {
    padding-left: 5px;
    transform: translateY(-2px);
    font-size: 12px;
  }
  .el-badge__content {
    height: 14px;
    padding: 0 4px;
    line-height: 14px;
    top: 0;
    box-sizing: content-box;
  }
}