/**
 * Canvas Icon Browser
 *
 * Grid of every icon in the enabled icon packs, with a live filter field.
 * The column count is a custom property so a layout can override it per
 * breakpoint without restating the rule.
 *
 * @package Canvas_Core
 * @since   1.0.0
 */

/* ── Grid ────────────────────────────────────────────────────────────── */
ul.icons-list {
	--cnvs-icons-list-columns: 1;
	--cnvs-icons-list-gutter: 15px;
	--cnvs-icons-list-row-gap: 20px;
	--cnvs-icons-list-size: 24px;

	display: flex;
	flex-wrap: wrap;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

ul.icons-list li {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: calc(100% / var(--cnvs-icons-list-columns));
	margin-bottom: var(--cnvs-icons-list-row-gap);
	padding: 0 var(--cnvs-icons-list-gutter);
	font-size: 16px;
}

ul.icons-list li i {
	flex: 0 0 auto;
	width: var(--cnvs-icons-list-size);
	height: var(--cnvs-icons-list-size);
	line-height: var(--cnvs-icons-list-size);
	margin-right: 20px;
	font-size: var(--cnvs-icons-list-size);
	text-align: center;
}

ul.icons-list li span {
	overflow-wrap: anywhere;
}

/* A filtered-out entry keeps its place in the DOM but leaves the flow. */
ul.icons-list li[hidden] {
	display: none;
}

@media (min-width: 576px) {
	ul.icons-list {
		--cnvs-icons-list-columns: 2;
	}
}

@media (min-width: 992px) {
	ul.icons-list {
		--cnvs-icons-list-columns: 3;
	}
}

@media (min-width: 1200px) {
	ul.icons-list {
		--cnvs-icons-list-columns: 4;
	}
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.cnvs-icons-empty {
	display: none;
	padding: 2rem 0;
	text-align: center;
}

.cnvs-icons-empty.is-visible {
	display: block;
}