.cb-icon {
	display: block;
	width: var(--cb-icon-size, 24px);
	height: var(--cb-icon-size, 24px);
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--cb-icon-stroke, 2);
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: translate(var(--cb-icon-x, 0), var(--cb-icon-y, 0));
}

.cb-icon * {
	vector-effect: non-scaling-stroke;
}

.cb-icon-badge {
	--cb-icon-badge-size: 48px;
	--cb-icon-size: 24px;
	display: inline-grid;
	width: var(--cb-icon-badge-size);
	height: var(--cb-icon-badge-size);
	place-items: center;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--cb-icon-badge-bg, #f3f2ff);
	color: var(--cb-icon-badge-color, #ff3b12);
	box-shadow: none;
}

.cb-icon-badge--sm {
	--cb-icon-badge-size: 40px;
	--cb-icon-size: 20px;
}

.cb-icon-badge--md {
	--cb-icon-badge-size: 48px;
	--cb-icon-size: 24px;
}

.cb-icon-badge--lg {
	--cb-icon-badge-size: 64px;
	--cb-icon-size: 30px;
}

.cb-icon-badge--xl {
	--cb-icon-badge-size: 80px;
	--cb-icon-size: 36px;
}

.cb-icon-badge--dark {
	--cb-icon-badge-bg: rgba(255, 255, 255, 0.08);
	--cb-icon-badge-color: #ff4a1c;
}