.kelvin.widget{
	position:relative;
	padding:0;
	grid-column: auto/span 3;
	grid-row: auto/span 3;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-content: center;
}

.kelvin.widget > div {
	overflow:hidden;
	pointer-events: none;
	color: var(--color);
	border-radius:1rem;
	opacity: 1;
	aspect-ratio: 1/1;
	font-size   : calc( 3*var(--c));
	line-height : calc( 3*var(--c));
	text-align:center;
}
.kelvin.widget > div::before{
	font-size  :1em;
	line-height:1em;
	height: 1em;
	width: 1em;
	
}

.kelvin.widget > div > svg{
	width:100%;
	height:100%;
	stroke-width: 4px;
}
.kelvin.widget > div > svg circle{
	fill:var(--color);
}

/** option 1, with svg arc segments **/
.kelvin.widget > svg{
	position:absolute;
	width: 200vw;
	height: 200vw;
	left: 50%;
	top : calc( 50% - 100vw);
	pointer-events: all;
	stroke-width:var(--c);
	overflow: visible;
	display: none;
	transform: rotate( calc(var(--angle) - 90deg));
	opacity: 0.7;
	z-index: 2;
	vector-effect: non-scaling-stroke;
}
.kelvin.widget.active > svg{
	display:block;
} 
.kelvin.widget svg path{
	fill: none;
}