$tag-colors: (
	'primary': $primary,
	'secondary': $secondary,
	'tertiary': $tertiary,
);

.tag {
	&:where(:not(body)) {
		// some CMS like Wordpress add a 'tag' class to the body, so we negate this
		// :where doesn't add extra specificity.

		position: relative;
		display: inline-block;
		margin: 0 $spacing-2xs $spacing-2xs 0;
		padding: $spacing-4xs $spacing-xs;
		@include typescale('xs');
		text-transform: lowercase;
		background: $grey--lightest;
		border-radius: $border-radius-sm;
	}

	&--margin-left {
		margin-left: $spacing-xs;
	}

	// Colours

	@each $name, $value in $tag-colors {
		&--#{$name} {
			background: $value;
			color: #{choose-contrast-color-prefer-white($value)};
			--color: #{choose-contrast-color-prefer-white($value)};
		}
	}
}

a.tag {
	text-decoration: none;
	color: var(--color, #{$text-color});

	&:hover, &:focus {

	}
}

.list--tags {
	// see lists/_lists.scss
}