/**
 * WB Ad Manager — Lucide icon base rules.
 *
 * Lucide renders inline SVGs via JS (lucide.createIcons()). These rules give
 * every icon a predictable size + color anchor regardless of surrounding
 * text styling, across both free and pro plugins and at both frontend and
 * admin surfaces. Size modifiers match the wbam_icon() helper's size arg.
 * Stroke inherits from currentColor so icons adopt the button / link /
 * heading color automatically.
 *
 * @package WB_Ad_Manager
 * @since   2.8.1
 */

.wbam-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: var(--wbam-icon-size, 20px);
	height: var(--wbam-icon-size, 20px);
	color: currentColor;
	stroke-width: 2;
	vertical-align: middle;
}

.wbam-icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
}

.wbam-icon--sm { --wbam-icon-size: 16px; }
.wbam-icon--md { --wbam-icon-size: 20px; }
.wbam-icon--lg { --wbam-icon-size: 24px; }
.wbam-icon--xl { --wbam-icon-size: 32px; }

/* Reserved box before Lucide hydrates the <i data-lucide> tag, so buttons
   don't reflow when icons swap in. */
.wbam-icon:empty {
	display: inline-block;
}

/* Rating stars.
 *
 * Review_Manager::render_stars() marks each star wbam-star-filled,
 * wbam-star-half or wbam-star-empty, but a Lucide star is stroke-only
 * (fill="none"), so all three states rendered identically: a 4-of-5 seller
 * rating looked exactly like no rating at all. These rules are what make the
 * distinction visible, and they live here - beside the icon base rules, in the
 * free plugin's shared lucide stylesheet - so every surface that renders stars
 * gets them: classifieds, advertiser portal and the admin reviews table, free
 * and pro alike.
 */
.wbam-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.wbam-star-filled,
.wbam-star-filled svg,
.wbam-star-half,
.wbam-star-half svg {
	color: var(--wbam-warning, #dba617);
	fill: currentColor;
}

.wbam-star-empty,
.wbam-star-empty svg {
	color: var(--wbam-border-strong, #c3c4c7);
	fill: none;
}