/* Components: Chips */

@utility chip {
	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);

	/* Transitions */
	transition-property: all;
	transition-timing-function: var(--default-transition-timing-function);
	transition-duration: var(--default-transition-duration);

	@variant hover {
		filter: brightness(125%);
		@variant dark {
			filter: brightness(75%);
		}
	}
}

@utility chip-icon {
	box-sizing: content-box;
	border-radius: var(--radius-base);

	/* 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);

	@variant hover {
		filter: brightness(125%);
		@variant dark {
			filter: brightness(75%);
		}
	}
}