- var data = [
- 	{
- 		slist: ['#ebac79', '#d65b56'], 
- 		ptext: 'Pancake muffin chocolate syrup brownie.'
- 	}, 
- 	{
- 		slist: ['#90cbb7', '#2fb1a9'], 
- 		ptext: 'Cake lemon berry muffin plum macaron.'
- 	}, 
- 	{
- 		slist: ['#8a7876', '#32201c'], 
- 		ptext: 'Wafer apple tart pie muffin gingerbread.'
- 	}, 
- 	{
- 		slist: ['#a6c869', '#37a65a'], 
- 		ptext: 'Liquorice plum topping chocolate lemon.'
- 	}
- ].reverse();
- var n = data.length;

while n--
	p(style=`--slist: ${data[n].slist}`) #{data[n].ptext}

$w: 26em;
$h: 5em;
$b: .5em;
$p: .25em;
$d: $h - 2*$b;
$r: .5*$h;

html { background: #eee }

body { filter: drop-shadow(0 2*$b 2*$b rgba(#000, .2)) }

p {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	margin: 1.25em auto;
	border: solid $b transparent;
	padding: $p;
	width: $w; height: $h;
	border-radius: $r;
	background: 
		Linear-gradient(#dbdbdb, #fff) content-box, 
		Linear-gradient(var(--slist)) padding-box, 
		Linear-gradient(#fff, #dcdcdc) border-box;
	font: 1.5em/ 1.375 trebuchet ms, verdana, sans-serif;
	text-align: center;
	text-indent: 1em;
	-webkit-clip-path: inset(0 round $r);
					clip-path: inset(0 round $r);
	counter-increment: c;
	
	&:before {
		position: absolute;
		right: -$b;
		width: $h; height: $h;
		border-radius: $b;
		transform: rotate(45deg);
		box-shadow: 0 0 7px rgba(#000, .2);
		background: Linear-gradient(-45deg, 
			#e4e4e4 calc(50% - #{.5*$h}), #fff calc(50% + #{.5*$h}));
		content: ''
	}
	
	&:after {
		box-sizing: inherit;
		display: grid;
		place-content: center;
		position: relative;
		border: inherit;
		margin-right: -$p;
		width: $d; height: $d;
		border-radius: 50%;
		box-shadow: inset 0 0 1px 1px #efefef, 
			inset 0 #{-$b} rgba(#000, .1);
		background: 
			Linear-gradient(var(--slist)) padding-box, 
			Linear-gradient(#d0d0d0, #e7e7e7) border-box;
		color: #fff;
		text-indent: 0;
		content: counter(c, decimal-leading-zero)
	}
}