.zui-button {
  color: $color-text;
  background-color: $color-white;
  cursor: pointer;
	border-radius: 0.35rem;
  display: inline-flex;
	align-items: center;
	justify-content: center;
  border: none;
  outline: none;
	line-height: 1.5;
	box-sizing: border-box;
	border: 1px solid transparent;
	vertical-align: middle;
	&__icon {
		padding-right: 0.25rem;
	}
	&.red {
		color: $color-red;
	}
	&.blue {
		color: $color-blue;
	}
	&.green {
		color: $color-green;
	}
  &.block {
    display: flex;
    width: 100%;
  }
	&.sm {
		padding: $h-gap-sm $v-gap-sm;
		font-size: $font-sm;
		height: $font-sm * 3;
		&.circle {
			height: $font-sm * 3;
			width: $font-sm * 3;
			.zui-icon {
				font-size: $font-md;
			}
		}
  }
  &.md {
		padding: $h-gap-md $v-gap-md;
		font-size: $font-md;
		height: $font-md * 3;
		&.circle {
			height: $font-md * 3;
			width: $font-md * 3;
			.zui-icon {
				font-size: $font-lg;
			}
		}
	}
	&.lg {
		padding: $h-gap-lg $v-gap-lg;
		font-size: $font-lg;
		height: $font-lg * 3;
		&.circle {
			height: $font-lg * 3;
			width: $font-lg * 3;
			.zui-icon {
				font-size: $font-lg * 1.5;
			}
		}
	}
	&.default {
		border-color: $color-border;
	}
	&.button-hover {
		background-color: $bg-active;
	}
	// primary
	@mixin primary-mixin($bgColor) {
		background-color: $bgColor;
		color: #fff;
		&.button-hover {
			background-color: lighten($bgColor, 10%);
		}
	}
	&.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%);
		&.button-hover {
			background-color: hsl(hue($color), saturation($color), 90%);
		}
	}
	&.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;
		&:not(.custom).button-hover {
			background-color: hsl(hue($color), saturation($color), 90%);
		}
	}
	&.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;
		&:not(.custom).button-hover {
			background-color: hsl(hue($color), saturation($color), 95%);
		}
	}
	&.ghost {
		@include ghost-mixin($color-primary);
		&.red {
			@include ghost-mixin($color-red);
		}
		&.green {
			@include ghost-mixin($color-green);
		}
		&.blue {
			@include ghost-mixin($color-blue);
		}
	}
	// link
	@mixin link-mixin($color) {
		background-color: transparent;
		border-color: transparent;
		color: $color;
		&.button-hover {
			color: lighten($color, 10%);
		}
	}
	&.link {
		@include link-mixin($color-primary);
		&.red {
			@include link-mixin($color-red);
		}
		&.green {
			@include link-mixin($color-green);
		}
		&.blue {
			@include link-mixin($color-blue);
		}
	}
	&.disabled {
		filter: opacity(50%);
		cursor: not-allowed;
	}
	&.round {
		border-radius: 1.5rem;
	}
	&.square {
		border-radius: 0;
	}
	&.circle {
		border-radius: 50%;
		overflow: hidden;
		line-height: 1;
		.zui-button__icon {
			padding-right: 0;
		}
	}
}