.color.widget{
	position:relative;
	padding:0;
	grid-column: auto/span 3;
	grid-row: auto/span 3;
	--color: var(--dominant-color);
	color: hsla( calc( var(--angle) + var(--dhue)), 100%, 50%, var(--alpha) );
	color: currentcolor;
}

/*just a disk
.color.widget div {
	position:absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	overflow:hidden;
	pointer-events: none;
	background: var(--dominant-color);
	border-radius: 50%;
}
*/

/*palette icon*/
.color.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;
}
.color.widget > div::before{
	font-size  :1em;
	line-height:1em;
	height: 1em;
	width: 1em;
	
}

/** option 1, with svg arc segments **/
.color.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;
	z-index: 2;
}
.color.widget.active svg{
	display:block;
}
.color.widget svg path{
	color : hsla( calc( var(--angle) + var(--dhue)), 100%, 50%, var(--alpha) );
	fill  : none;
	stroke: currentColor;
	pointer-events: visiblepainted;
}