h2 Customizable Traffic Light

div.traffic-light.state-4
  - const lights = 3;
  - for (let i = 0; i < lights; i++) 
    div.light
    
small Uncomment JS code for cycling through states

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap");

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: "Lato";
  font-weight: 300;
  font-size: 24px;
  background: #2b2b2b;
}

h2, small  {
  display: block;
  color: white;
  font-weight: 300;
}

small {
  margin-top: 2rem;
}

.traffic-light {
  $item-size: 3rem;
  $spacing: 8px;
  $light-spacing: 8px;
  $shine-size: 24px;
  $direction: column;
  
  $colors: (#d5385a, #fdc82e, #57c443);
  $states: (
    1: (1),
    2: (1, 2),
    3: (3),
    4: (2, 3),
    5: (1),
  );
  
  $item-count: length($colors);
  border-radius: $item-size;
  
  border: 2px solid #d9d9d9;
  display: flex;
  flex-direction: $direction;
  padding: $spacing;
  
  .light {
    width: $item-size;
    height: $item-size;
    border-radius: $item-size;
    margin: $light-spacing;
    
    background: red;
    border: 2px solid transparent;
    
    transition: 500ms background-color ease, 500ms box-shadow ease, border-color 500ms ease;
    
    @for $i from 1 through length($colors) {
      &:nth-child(#{$i}) {
        background-color: rgba(nth($colors, $i), 0.1);
      }
    }
  }
    
  @each $state, $sequence in $states {
    &.state-#{$state} {
      @each $i in $sequence {
        > :nth-child(#{$i}) {
          background-color: nth($colors, $i);
          box-shadow: 0px 0px 0.5 * $shine-size 0.25 * $shine-size nth($colors, $i);
          border-color: #2b2b2b;
        }
      }
    }
  }
}

let state = 1;
const tl = document.querySelector('div.traffic-light');
/*
setInterval(() => {
  state = (state++ % 4) + 1;
  tl.className = `traffic-light state-${state}`;
}, 1000);
*/