- 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)
  }
}