/**
 * IncubeSocial Service Thumbnails — Icon + Gradient Badge System.
 *
 * Pairs with inc-thumbnails.php (incubesocial_render_thumbnail_badge()).
 * Reads color/gradient values exclusively from design-tokens.css via
 * inline style="background-color/background-image:var(...)" set by PHP --
 * this stylesheet only owns shape/size/layout, never color.
 *
 * Default size: 48px rounded-square, flex-centered, ~24px white icon.
 * Modifiers: .service-thumbnail-badge--sm (32px / ~16px icon),
 *            .service-thumbnail-badge--lg (72px / ~36px icon).
 */

.service-thumbnail-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	color: #FFFFFF;
	background-size: 160% 160%;
	background-position: center;
}

.service-thumbnail-badge svg {
	width: 24px;
	height: 24px;
	display: block;
}

.service-thumbnail-badge--sm {
	width: 32px;
	height: 32px;
	border-radius: 10px;
}

.service-thumbnail-badge--sm svg {
	width: 16px;
	height: 16px;
}

.service-thumbnail-badge--lg {
	width: 72px;
	height: 72px;
	border-radius: 20px;
}

.service-thumbnail-badge--lg svg {
	width: 36px;
	height: 36px;
}