.category, .version {
	display: inline-block;
	margin: 0;

	a,
	span.cat {
		display: inline-block;

		font-weight: bold;
		text-decoration: none;
		text-transform: capitalize;
		font-size: .7rem;
		line-height: 1;

		background: #4ea7ff;
		color: #fff;

		border-radius: 36px;
		padding: 6px 12px;

		max-width: 100%;
		word-wrap: break-word;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	a {
		@include transition(background, .1s);

		&:hover {
			background: lighten(#4ea7ff, 5%);
		}
	}



	&.default {
		a,
		span.cat {
			background: #4ea7ff;
			color: #fff;

			&:hover {
				background: lighten(#4ea7ff, 5%);
			}
		}
	}


	&.frontend {
		a,
		span.cat {
			background: #4ea7ff;
			color: #fff;

			&:hover {
				background: lighten(#4ea7ff, 5%);
				color: #fff;
			}
		}
	}


	&.core {
		a,
		span.cat {
			background: #ff661b;
			color: #fff;

			&:hover {
				background: lighten(#ff661b, 10%);
			}
		}
	}


	&.azure {
		a,
		span.cat {
			background: #1ed45c;
			color: #fff;

			&:hover {
				background: lighten(#1ed45c, 5%);
			}
		}
	}
}



.version {
	a,
	span.cat {
		background: rgba($color-space, .22);
		color: $color-space;

		&:hover {
			background: #fff;
		}
	}

	&.default {
		a,
		span.cat {
			background: transparent;
			border: 1px solid #cbcbcb;
			color: darken(#cbcbcb, 10%);

			&:hover {
				color: darken(#cbcbcb, 20%);
				background: transparent;
			}
		}
	}
}
