// 这是一个示例文件，展示如何使用传入样式对象的混入

@import '../../variable.less';

// 示例1: 使用 @rest... 语法 - 这是最常用和推荐的方式
// 混入只声明选择器，样式通过参数传入

// 定义混入：只声明选择器结构
.skin-hover-style(@selector; @rest...) {
  @{selector} {
    &:hover {
      @rest();
    }
  }
}

// 使用示例：
.zhny-icon-button-example {
  // 方式1：直接传入样式属性
  .skin-hover-style('.skin-red &', {
    color: #ac0f15;
    .iconfont {
      color: #ac0f15;
    }
  });

  // 方式2：传入多个属性
  .skin-hover-style('.skin-green &', {
    color: #ca5636;
    background: #fcefeb;
    border-color: #fcefeb;
    .iconfont {
      color: #ca5636;
    }
  });
}

// 示例2: 更复杂的混入 - 支持嵌套选择器
.skin-variant-style(@base-selector; @rest...) {
  @{base-selector} {
    @rest();
  }
}

// 使用示例：
.zhny-icon-button-advanced {
  .skin-variant-style('.skin-red &', {
    color: #666666;
    background: #f7e7e8;
    border-color: #f7e7e8;
    .iconfont {
      color: #666;
    }
    &:hover {
      color: #ac0f15;
      .iconfont {
        color: #ac0f15;
      }
    }
  });
}

// 示例3: 结合你现有的 iconColor 混入使用
.icon-color-with-bg(@bg-color; @text-color; @icon-color) {
  background: @bg-color;
  border-color: @bg-color;
  color: @text-color;
  .iconfont {
    color: @icon-color;
  }
}

// 使用：
.zhny-icon-button-combined {
  &.skin-red {
    .icon-color-with-bg(#f7e7e8, #666666, #666);
  }
}