/**
 * Chip Component
 *
 * Small tag/pill for topics, filters, and categories.
 *
 * @package CPDC_Sovereign_Debt_Hub
 * @since 0.1.0
 */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.25em 0.625em;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.4;
	background-color: var(--wp--preset--color--gray-100);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--gray-700);
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ==========================================================================
   Interactive Chips (Links)
   ========================================================================== */

a.chip:hover,
button.chip:hover {
	background-color: var(--wp--preset--color--gray-200);
	border-color: var(--wp--preset--color--gray-400);
	color: var(--wp--preset--color--gray-900);
}

a.chip:focus-visible,
button.chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Active State (for filter chips)
   ========================================================================== */

.chip--active {
	background-color: var(--wp--preset--color--ocean-indigo);
	border-color: var(--wp--preset--color--ocean-indigo);
	color: var(--wp--preset--color--white);
}

.chip--active:hover {
	background-color: var(--wp--preset--color--ocean-blue);
	border-color: var(--wp--preset--color--ocean-blue);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

.chip--small {
	padding: 0.125em 0.5em;
	font-size: 0.6875rem;
}

.chip--large {
	padding: 0.375em 0.875em;
	font-size: var(--wp--preset--font-size--sm);
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.chip {
		transition: none;
	}
}