/*
 * SIA Icon List — chip-style icon + text list. Fork of the classic Icon
 * List with per-item background/border control (global in Style → Item,
 * optionally overridden per item via inline style — see class-widget.php).
 *
 * Layout is toggled by a prefix_class on the root: `.sia-il--vertical` /
 * `.sia-il--inline` (the latter wraps).
 */

.sia-il__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sia-il--vertical .sia-il__list {
	flex-direction: column;
	align-items: flex-start;
}
.sia-il--inline .sia-il__list {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

/* ─── Item (the styleable chip) ───
   Sensible default look (light neutral chip) so the widget is usable before
   any Style-tab changes — matches the reference "tag" appearance. Every
   value here is overridden by the Style → Item stylesheet rules (which win
   via the Elementor wrapper ID), and can be overridden again per item via
   inline style (see render() — inline always wins over a class rule). */
.sia-il__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: color-mix(in srgb, var(--sia-color-secondary, #54595F) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--sia-color-secondary, #54595F) 18%, #fff);
	border-radius: 8px;
	padding: 8px 14px;
	color: var(--sia-color-text, #1A1718);
	text-decoration: none;
	line-height: 1.3;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
a.sia-il__item {
	cursor: pointer;
}

/* ─── Icon ─── */
.sia-il__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	color: var(--sia-color-primary, #6EC1E4);
	flex: 0 0 auto;
}
.sia-il__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* ─── Text ─── */
.sia-il__text {
	font-size: 14px;
}

/* color-mix() fallback for legacy browsers */
@supports not (color: color-mix(in srgb, red, blue)) {
	.sia-il__item {
		background: #f3f4f6;
		border-color: #e5e7eb;
	}
}

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