#wrapper
{
	display: flex;
}


#wrapper > div 
{
	width: 40px;
}

div span
{
	border: 1px solid gray;
	background: #efefef;
	display: block;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	transition-duration: 500ms;
	
}


@for $i from 1 through 10
{
	div:nth-child(#{$i}) span.active
	{
	    background: mix(green, white, $i * 10);
	}
}