.zui-button {
  color: #323233;
  background-color: #fff;
  padding: $h-gap-md $v-gap-md;
  font-size: $font-md;
  font-weight: normal;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  cursor: pointer;
  transition: all 70ms ease;
	border-radius: 0.35rem;
  position: relative;
  display: inline-block;
  text-align: center;
  border: none;
  outline: none;
	line-height: 1.5;
	box-sizing: border-box;
	border: 1px solid transparent;
	&.red {
		color: $color-red;
	}
	&.blue {
		color: $color-blue;
	}
	&.green {
		color: $color-green;
	}
  &.block {
    display: block;
    width: 100%;
  }
	&.sm {
		padding: $h-gap-sm $v-gap-sm;
		font-size: $font-sm;
  }
  &.md {
		padding: $h-gap-md $v-gap-md;
		font-size: $font-md;
	}
	&.lg {
		padding: $h-gap-lg $v-gap-lg;
		font-size: $font-lg;
	}
	&.default {
		border-color: $color-border;
	}
	&.button-hover {
		background-color: $bg-active;
	}
	@mixin fill-mixin($color) {
		&.button-hover {
			background-color: $color;
		}
	}
	&.primary {
		background-color: $color-primary;
		color: #FFF;
		@include fill-mixin(lighten($color-primary, 10%));
		&.red {
			background-color: $color-red;
			@include fill-mixin(lighten($color-red, 10%));
		}
		&.green {
			background-color: $color-green;
			@include fill-mixin(lighten($color-green, 10%));
		}
		&.blue {
			background-color: $color-blue;
			@include fill-mixin(lighten($color-blue, 10%));
		}
	}
	&.secondary {
		color: $color-primary;
		background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
		@include fill-mixin(hsl(hue($color-primary), saturation($color-primary), 90%));
		&.red {
			color: $color-red;
			background-color: hsl(hue($color-red), saturation($color-red), 95%);
			@include fill-mixin(hsl(hue($color-red), saturation($color-red), 90%));
		}
		&.green {
			color: $color-green;
			background-color: hsl(hue($color-green), saturation($color-green), 95%);
			@include fill-mixin(hsl(hue($color-green), saturation($color-green), 90%));
		}
		&.blue {
			color: $color-blue;
			background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
			@include fill-mixin(hsl(hue($color-blue), saturation($color-blue), 90%));
		}
	}
	&.plain {
		color: $color-primary;
		background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
		border-color: $color-primary;
		&:not(.custom).button-hover {
			background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
		}
		&.red {
			color: $color-red;
			border-color: $color-red;
			background-color: hsl(hue($color-red), saturation($color-red), 95%);
			&:not(.custom).button-hover {
				background-color: hsl(hue($color-red), saturation($color-red), 90%);
			}
		}
		&.green {
			color: $color-green;
			border-color: $color-green;
			background-color: hsl(hue($color-green), saturation($color-green), 95%);
			&:not(.custom).button-hover {
				background-color: hsl(hue($color-green), saturation($color-green), 90%);
			}
		}
		&.blue {
			color: $color-blue;
			border-color: $color-blue;
			background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
			&:not(.custom).button-hover {
				background-color: hsl(hue($color-blue), saturation($color-blue), 90%);
			}
		}
	}
	&.ghost {
		color: $color-primary;
		background-color: transparent;
		border-color: $color-primary;
		&:not(.custom).button-hover {
			background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
		}
		&.red {
			color: $color-red;
			border-color: $color-red;
			&:not(.custom).button-hover {
				background-color: hsl(hue($color-red), saturation($color-red), 95%);
			}
		}
		&.green {
			color: $color-green;
			border-color: $color-green;
			&:not(.custom).button-hover {
				background-color: hsl(hue($color-green), saturation($color-green), 95%);
			}
		}
		&.blue {
			color: $color-blue;
			border-color: $color-blue;
			&:not(.custom).button-hover {
				background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
			}
		}
	}
	&.link {
		background-color: transparent;
		border-color: transparent;
		color: $color-primary;
		&.button-hover {
			color: lighten($color-primary, 10%);
		}
		&.red {
			color: $color-red;
			&.button-hover {
				color: lighten($color-red, 10%);
			}
		}
		&.green {
			color: $color-green;
			&.button-hover {
				color: lighten($color-green, 10%);
			}
		}
		&.blue {
			color: $color-blue;
			&.button-hover {
				color: lighten($color-blue, 10%);
			}
		}
	}
	&.disabled {
		background-color: $bg-disabled;
		color: $color-disabled;
		cursor: not-allowed;
		&.button-hover {
			background-color: $bg-disabled;
		}
	}
	&.round {
		border-radius: 1.5rem;
	}
	&.square {
		border-radius: 0;
	}
}