.zui-tag {
  color: $color-text;
  background-color: $color-white;
  cursor: pointer;
	border-radius: 10upx;
  display: inline-flex;
	align-items: center;
	justify-content: center;
  border: none;
  outline: none;
	line-height: 1;
  height: 36upx;
  box-sizing: border-box;
	border: 1px solid transparent;
	vertical-align: middle;
  font-size: 22upx;
  padding: $padding-base $padding-xs;
  word-break: break-all;
  white-space: nowrap;
	&.red {
		color: $color-red;
	}
	&.blue {
		color: $color-blue;
	}
	&.green {
		color: $color-green;
	}
	&.default {
		border-color: $color-border;
	}
	// primary
	@mixin primary-mixin($bgColor) {
		background-color: $bgColor;
		color: $color-white;
	}
	&.primary {
		@include primary-mixin($color-primary);
		&.red {
			@include primary-mixin($color-red);
		}
		&.green {
			@include primary-mixin($color-green);
		}
		&.blue {
			@include primary-mixin($color-blue);
		}
	}
	// secondary
	@mixin secondary-mixin($color) {
		color: $color;
		background-color: hsl(hue($color), saturation($color), 95%);
	}
	&.secondary {
		@include secondary-mixin($color-primary);
		&.red {
			@include secondary-mixin($color-red);
		}
		&.green {
			@include secondary-mixin($color-green);
		}
		&.blue {
			@include secondary-mixin($color-blue);
		}
	}
	// plain
	@mixin plain-mixin($color) {
		color: $color;
		background-color: hsl(hue($color), saturation($color), 95%);
		border-color: $color;
	}
	&.plain {
		@include plain-mixin($color-primary);
		&.red {
			@include plain-mixin($color-red);
		}
		&.green {
			@include plain-mixin($color-green);
		}
		&.blue {
			@include plain-mixin($color-blue);
		}
	}
	// ghost
	@mixin ghost-mixin($color) {
		color: $color;
		background-color: transparent;
		border-color: $color;
	}
	&.ghost {
		@include ghost-mixin($color-primary);
		&.red {
			@include ghost-mixin($color-red);
		}
		&.green {
			@include ghost-mixin($color-green);
		}
		&.blue {
			@include ghost-mixin($color-blue);
		}
	}
	&.round {
		border-radius: 80upx;
	}
	&.square {
		border-radius: 0;
	}
	&.circle {
		border-radius: 50%;
		overflow: hidden;
		line-height: 1;
		.zui-button__icon {
			padding-right: 0;
		}
	}
}