@use '../../style/mixins/_var' as *;
@use '../../style/mixins/function' as *;

@use 'element-plus/theme-chalk/src/mixins/function.scss' as elFn;

@mixin avatar {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 28px;
  text-align: center;
  background-color: #e4e7ed;
  color: #fff;
  border-radius: 50%;
}

@mixin side-menu-ui-reset {
  &.el-menu--collapse {
    & > .el-sub-menu > .el-sub-menu__title:hover {
      background-color: getCssVar('layout', 'sub-menu-bg-color');
      transition: none;
    }
  }

  &.el-menu--inline {
    background-color: getCssVar('layout', 'sub-menu-bg-color');
  }

  .el-menu-item {
    min-width: auto;
    &.is-disabled {
      opacity: 1;
      color: getCssVar('layout', 'side-menu-disabled-text-color');
      .pagoda-layout-sidemenu-icon,
      .el-sub-menu__icon-arrow {
        color: getCssVar('layout', 'side-menu-disabled-text-color');
      }
    }

    &.is-active {
      position: relative;
      color: elFn.getCssVar('color-primary') !important;
      background-color: getCssVar(
        'layout',
        'side-menu-active-gb-color'
      ) !important;
      .pagoda-layout-sidemenu-icon,
      .el-sub-menu__icon-arrow {
        color: elFn.getCssVar('color-primary') !important;
      }
    }

    &:not(.is-disabled):hover {
      color: elFn.getCssVar('color-primary') !important;
      .pagoda-layout-sidemenu-icon {
        color: elFn.getCssVar('color-primary') !important;
      }
    }
  }

  .el-menu-item,
  .el-sub-menu__title {
    padding-right: getCssVar('layout', 'side-menu-padding');
    background-color: transparent;
    color: getCssVar('layout', 'side-menu-text-color');
    .pagoda-layout-sidemenu-icon {
      width: 24px;
      text-align: center;
      color: getCssVar('layout', 'side-menu-text-color');
      transition: color 0.3s;
    }
    .el-sub-menu__icon-arrow {
      right: getCssVar('layout', 'side-menu-padding');
      color: getCssVar('layout', 'side-menu-arrow-icon-color');
    }
  }

  .el-menu-item-group__title {
    color: getCssVar('layout', 'side-menu-group-title-text-color');
  }
}