.kits {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
	list-style: none;
	padding: 0;
	margin: 0;
}

.kit {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--font-xs);
	font-weight: var(--weight-bold);
	background-color: var(--color-bg-high);
	border: var(--border-style);
	border-radius: var(--radius-field);
	padding: var(--s-1) var(--s-3);
}

.kitName {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kitGear {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	margin-inline-start: var(--s-1);
}

.gearLink {
	display: inline-flex;
	align-items: center;
	padding: var(--s-0-5);
	margin: calc(-1 * var(--s-0-5));
	border-radius: var(--radius-field);
	text-decoration: none;
	transition: background-color 0.15s;

	&:hover,
	&:focus-visible {
		background-color: var(--color-bg-high);
	}
}