
.tag {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--spacing-2);
	white-space: nowrap;
	flex-wrap: nowrap;
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-1);
	color: var(--color-secondary-700);

	&--link {
		color: var(--color-primary-500);
		border-color: var(--color-primary-500);
		text-decoration: none;
		transition: background-color var(--duration-normal) ease;

		&:hover {
			background-color: var(--color-primary-100);
		}
	}

	&__icon {

		+ .tag__text {
			padding-left: var(--spacing-1);
		}
	}

	&__text {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		line-height: 1;
		text-transform: capitalize;
		padding: var(--spacing-1-5) 0;
	}

	&--api {
		border: none;
		border-radius: 0;

		&-class {
			color: var(--color-info-600);
			background-color: var(--color-info-100);
		}

		&-interface {
			color: var(--color-green-700);
			background-color: var(--color-green-50);
		}

		&-module {
			color: var(--color-rose-800);
			background-color: var(--color-rose-50);
		}

		&-typedef {
			color: var(--color-cyan-700);
			background-color: var(--color-cyan-50);
		}

		.tag__text {
			font-weight: var(--font-weight-bold);
			line-height: 1;
			font-size: var(--font-size-sm);
			padding-left: var(--spacing-1);

			&--capitalize {
				text-transform: capitalize;
			}
		}
	}

	&-wrapper {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-2);
	}
}
