/* Components: Badges */

@utility badge {
	border-radius: var(--radius-base);

	/* Icon Spacing */
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: --spacing(2);

	/* Typography */
	text-decoration-line: none;
	white-space: nowrap;

	/* Size */
	font-size: var(--text-xs);
	line-height: var(--text-xs--line-height);
	padding-block: --spacing(1);
	padding-inline: --spacing(3);
}

@utility badge-icon {
	box-sizing: content-box;
	border-radius: 100%;

	/* Center Icons */
	display: inline-flex;
	justify-content: center;
	align-items: center;

	/* Typography */
	text-decoration-line: none;
	white-space: nowrap;

	/* Size */
	font-size: var(--text-xs);
	width: var(--text-xs);
	height: var(--text-xs);
	padding: --spacing(1.5);
}