@mixin tag($bg, $color, $bg-hover: darken($bg, 5%), $color-hover: $color) {
	background-color: $bg;
	color: $color;
	padding: 1px 4px;

	& > a {
		color: $color;
	}

	&.tag-link:hover,
	&.tag-link:focus,
	&.tag-link.highlight {
		background-color: $bg-hover;
	}

	&.tag-link:hover > a {
		color: $color-hover;
	}
}

@mixin tag-btn($bg, $color, $bg-hover: darken($bg, 5%), $color-hover: $color) {
	& > button {
		background-color: $bg;
		border: 0;
		color: $color;
		font-size: $font-size-base;

		&:hover,
		&:focus,
		&.highlight {
			background-color: $bg-hover;
			color: $color-hover;
		}
	}

	&.addon > button {
		border-color: darken($bg, 10%);
	}
}
