/* 构造按钮的 Less 函数(背景白色)，@name 生成的样式名称，@color 文字和边框颜色 */
.create_btn(@name, @color) {
  .@{name} {
    /* 按钮的颜色 */
    --ph-btn-color: @color;
    /* 按钮的背景色 */
    --ph-btn-bg-color: #fff;
    /* 按钮的边框颜色 */
    --ph-btn-border-color: @color;
    /* 按钮的悬浮边框 less lighten(@color, 10) */
    --ph-btn-hover-color: lighten(@color, 10%);
    /* 按钮的点击颜色 less darken(@color, 10%) */
    --ph-btn-active-color: darken(@color, 10%);
  }
}

/* 构造按钮的 Less 函数(文字白色)，@name 生成的样式名称，@color 背景和边框颜色 */
.create_btn_fill(@name, @color) {
  .@{name} {
    /* 按钮的颜色 */
    --ph-btn-color: #fff;
    /* 按钮的背景色 */
    --ph-btn-bg-color: @color;
    /* 按钮的边框颜色 */
    --ph-btn-border-color: @color;
    /* 按钮的悬浮边框 less lighten(var(--ph-primary-color), 10) */
    --ph-btn-hover-color: #fff;
    --ph-btn-hover-border-color: lighten(@color, 10%);
    --ph-btn-hover-bg-color: lighten(@color, 10%);
    /* 按钮的点击颜色 */
    --ph-btn-active-color: #fff;
    --ph-btn-active-border-color: darken(@color, 10%);
    --ph-btn-active-bg-color: darken(@color, 10%);
  }
}

/* 生成按钮属性的 less 函数, @color 文字和边框颜色 */
.create_btn_rule(@color) {
  /* 按钮的颜色 */
  --ph-btn-color: @color;
  /* 按钮的背景色 */
  --ph-btn-bg-color: #fff;
  /* 按钮的边框颜色 */
  --ph-btn-border-color: @color;
  /* 按钮的悬浮边框 less lighten(var(--ph-primary-color), 10) */
  --ph-btn-hover-color: lighten(@color, 10%);
  /* 按钮的点击颜色 */
  --ph-btn-active-color: darken(@color, 10%);
}

/* 构造按钮的 Less 函数(文字白色)，@name 生成的样式名称，@color 背景和边框颜色 */
.create_btn_fill_rule(@color) {
  /* 按钮的颜色 */
  --ph-btn-color: #fff;
  /* 按钮的背景色 */
  --ph-btn-bg-color: @color;
  /* 按钮的边框颜色 */
  --ph-btn-border-color: @color;
  /* 按钮的悬浮边框 less lighten(var(--ph-primary-color), 10) */
  --ph-btn-hover-color: #fff;
  --ph-btn-hover-border-color: lighten(@color, 10%);
  --ph-btn-hover-bg-color: lighten(@color, 10%);
  /* 按钮的点击颜色 */
  --ph-btn-active-color: #fff;
  --ph-btn-active-border-color: darken(@color, 10%);
  --ph-btn-active-bg-color: darken(@color, 10%);
}