.zui-button {
  color: #323233;
  background-color: #fff;
  border: 1upx solid $color-border;
  padding: $h-gap-md $v-gap-md;
  font-size: $font-md;
  cursor: pointer;
  transition: all 150ms;
  display: flex;
  align-items: center;
  justify-content: center;
	border-radius: 10upx;
	&.sm {
		padding: $h-gap-sm $v-gap-sm;
		font-size: $font-sm;
	}
	&.lg {
		padding: $h-gap-lg $v-gap-lg;
		font-size: $font-lg;
	}
	&.active {
		background-color: $bg-active;
		border-color: $bg-active;
	}
	&.primary {
		background-color: $color-primary;
		border-color: $color-primary;
		color: #FFF;
		&.active {
			background-color: darken($color-primary, 3%);
			border-color: darken($color-primary, 3%);
		}
	}
	&.secondary {
		background-color: lighten($color-primary, 40%);
		border-color: lighten($color-primary, 40%);
		color: $color-primary;
		&.active {
			background-color: lighten($color-primary, 30%);
			border-color: lighten($color-primary, 30%);
			color: darken($color-primary, 3%);
		}
	}
	&.link {
		padding: $h-gap-sm $v-gap-sm;
		background: inherit;
		border: inherit;
		color: $color-primary;
		&.active {
			color: darken($color-primary, 5%);
		}
	}
	&.disabled {
		border-color: $bg-disabled;
		background-color: $bg-disabled;
		color: $color-disabled;
		cursor: not-allowed;
		&.active {
			border-color: $bg-disabled;
			background-color: $bg-disabled;
		}
	}
	&.round {
		border-radius: 48upx;
	}
	&.square {
		border-radius: 0upx;
	}
}