.tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		display: inline-flex;
		transition: var(--transition);
		margin: 0;
		padding: 0;

		&:active {
			transform: var(--active);
		}
	}

	a {
		transition: var(--transition);
		box-shadow: var(--edge-highlight);
		border-radius: 999px;
		background-color: var(--fg-muted-1);
		padding: 0.375rem 0.75rem;
		color: var(--fg-muted-5);
		font-size: var(--font-size-small);
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;

		&:hover {
			background-color: var(--accent-color-alpha);
			color: var(--accent-color);
			text-decoration: none;

			.count {
				background-color: var(--accent-color-alpha);
				color: var(--accent-color);
			}
		}

		&:has(.tag) {
			padding: 0;
		}

		.tag {
			display: inline-block;
			padding-inline-start: 0.75rem;
			padding-inline-end: 0.5rem;
			padding-block-start: 0.375rem;
			padding-block-end: 0.375rem;
		}

		.count {
			display: inline-block;
			transition: var(--transition);
			border-radius: 0 999px 999px 0;
			background-color: var(--fg-muted-1);
			padding-inline-start: 0.5rem;
			padding-inline-end: 0.625rem;
			padding-block-start: 0.375rem;
			padding-block-end: 0.375rem;

			font-variant-numeric: tabular-nums;

			:root[dir*="rtl"] & {
				border-radius: 999px 0 0 999px;
			}
		}
	}
}
