

//大按钮尺寸
$big-btn-height: 33px;
$big-btn-lr-padding: 20px;
$big-btn-font-size: 14px;

//中按钮尺寸
$middle-btn-height: 28px;
$middle-btn-lr-padding: 15px;
$middle-btn-font-size: 12px;

//小按钮尺寸
$small-btn-height: 23px;
$small-btn-lr-padding: 10px;
$small-btn-font-size: 12px;

//按钮基准样式(勿直接使用)
@mixin baseBtn(
  $font-size,
  $width,
  $height,
  $lrPadding,
  $common-font-color,//普通颜色
  $common-bg-color,
  $common-border-color,
  $hover-font-color,//hover颜色
  $hover-bg-color,
  $hover-border-color,
  $active-font-color,//active颜色
  $active-bg-color,
  $active-border-color,
  $disable-font-color,//disable颜色
  $disable-bg-color,
  $disable-border-color
) {
  @include userSelectNone();
  display: inline-block;
  height: $height;
  line-height: $height;
  text-align: center;
  color: $common-font-color;
  background-color: $common-bg-color;
  border: 1px solid $common-border-color;
  border-radius: 2px;
  font-size: $font-size;
  cursor: pointer;
  padding: 0 $lrPadding;
  max-width: $width;

  &:hover {
    color: $hover-font-color;
    background-color: $hover-bg-color;
    border: 1px solid $hover-border-color;
  }

  &:active {
    color: $active-font-color;
    background-color: $active-bg-color;
    border: 1px solid $active-border-color;
  }

  &.cd-disable {
    cursor: no-drop;
    color: $disable-font-color;
    pointer-events: none;
    background-color: $disable-bg-color;
    border: 1px solid $disable-border-color;
  }
}

//红色按钮基础(勿直接使用)
@mixin redBtn(
  $fontSize,
  $width,
  $height,
  $lrPadding) {
  @include baseBtn(
                  $fontSize,
                  $width,
                  $height,
                  $lrPadding,
                  $colorContainerBg, //普通颜色
                  $colorBtn,
                  $colorBtn,
                  $colorContainerBg, //hover颜色
                  $colorBtnHover,
                  $colorBtnHover,
                  $colorContainerBg, //active颜色
                  $colorBtnActive,
                  $colorBtnActive,
                  $colorContainerBg, //disable颜色
                  $colorBtnDisable,
                  $colorBtnDisableBorder
  );
}

//绿色按钮(勿直接使用)
@mixin greenBtn(
  $fontSize,
  $width,
  $height,
  $lrPadding) {
  @include baseBtn(
                  $fontSize,
                  $width,
                  $height,
                  $lrPadding,
                  $colorContainerBg, //普通颜色
                  $btnGreen,
                  $btnGreen,
                  $colorContainerBg, //hover颜色
                  $btnGreenHover,
                  $btnGreenHover,
                  $colorContainerBg, //active颜色
                  $btnGreenActive,
                  $btnGreenActive,
                  $colorContainerBg, //disable颜色
                  $colorDisable,
                  $colorBtnDisableBorder
  );
}

//红框红字按钮
@mixin redBorderBtn(
  $fontSize,
  $width,
  $height,
  $lrPadding) {
  @include baseBtn(
                  $fontSize,
                  $width,
                  $height,
                  $lrPadding,
                  $colorBtn, //普通颜色
                  $colorContainerBg,
                  $colorBtn,
                  $colorContainerBg, //hover颜色
                  $colorBtnHover,
                  $colorBtnHover,
                  $colorContainerBg, //active颜色
                  $colorBtnActive,
                  $colorBtnActive,
                  $colorBtnDisableBorder, //disable颜色
                  $colorContainerBg,
                  $colorBtnDisableBorder
  );
}

//黑框黑字按钮
@mixin blackBorderBtn(
  $fontSize,
  $width,
  $height,
  $lrPadding) {
  @include baseBtn(
                  $fontSize,
                  $width,
                  $height,
                  $lrPadding,
                  $colorBlack, //普通颜色
                  $colorContainerBg,
                  $colorBtnGhostBorder,
                  $colorBtnHover, //hover颜色
                  $colorContainerBg,
                  $colorBtnHover,
                  $colorBtnActive, //active颜色
                  $colorContainerBg,
                  $colorBtnActive,
                  $colorBtnDisableBorder, //disable颜色
                  $colorContainerBg,
                  $colorBtnDisableBorder
  );
}


//mix
@mixin bigRedBtn($width:auto,$height:$big-btn-height,$lrPadding:$big-btn-lr-padding) {
  @include redBtn(
                  $big-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

//直接样式
.cd-big-red-btn {
  @include bigRedBtn();
}


@mixin middleRedBtn($width:auto,$height:$middle-btn-height,$lrPadding:$middle-btn-lr-padding) {
  @include redBtn(
                  $middle-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-middle-red-btn {
  @include middleRedBtn();
}


@mixin smallRedBtn($width:auto,$height:$small-btn-height,$lrPadding:$middle-btn-lr-padding) {
  @include redBtn(
                  $small-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-small-red-btn {
  @include smallRedBtn();
}


@mixin bigGreenBtn($width:auto,$height: $big-btn-height,  $lrPadding:$big-btn-lr-padding) {
  @include greenBtn (
                  $big-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-big-green-btn {
  @include bigGreenBtn ();
}


@mixin middleGreenBtn($width:auto,$height: $middle-btn-height,$lrPadding:$middle-btn-lr-padding) {
  @include greenBtn (
                  $middle-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-middle-green-btn {
  @include middleGreenBtn();
}


@mixin smallGreenBtn($width:auto,$height: $small-btn-height,$lrPadding:$small-btn-lr-padding) {
  @include greenBtn (
                  $small-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-small-green-btn {
  @include smallGreenBtn();
}


@mixin bigRedBorderBtn($width:auto,$height:$big-btn-height,$lrPadding:$big-btn-lr-padding) {
  @include redBorderBtn (
                  $big-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-big-red-border-btn {
  @include bigRedBorderBtn();
}


@mixin middleRedBorderBtn($width:auto,$height:  $middle-btn-height, $lrPadding: $middle-btn-lr-padding) {
  @include redBorderBtn (
                  $middle-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-middle-red-border-btn {
  @include middleRedBorderBtn();
}


@mixin smallRedBorderBtn($width:auto,$height:$small-btn-height, $lrPadding:$small-btn-lr-padding) {
  @include redBorderBtn (
                  $small-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-small-red-border-btn {
  @include smallRedBorderBtn();
}


@mixin bigBlackBorderBtn($width:auto,$height:$big-btn-height, $lrPadding: $big-btn-lr-padding) {
  @include blackBorderBtn(
                  $big-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-big-black-border-btn {
  @include bigBlackBorderBtn();
}


@mixin middleBlackBorderBtn($width:auto,$height:$middle-btn-height,$lrPadding:$middle-btn-lr-padding) {
  @include blackBorderBtn(
                  $middle-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-middle-black-border-btn {
  @include middleBlackBorderBtn();
}


@mixin smallBlackBorderBtn($width:auto,$height:$small-btn-height,$lrPadding:$small-btn-lr-padding) {
  @include blackBorderBtn(
                  $small-btn-font-size,
                  $width,
                  $height,
                  $lrPadding
  );
}

.cd-small-black-border-btn {
  @include smallBlackBorderBtn();
}