.traffic-light{display:flex;flex-direction:row;padding:8px}.traffic-light .light{width:3rem;height:3rem;border-radius:3rem;margin:8px;background:red;border:2px solid #fff0;transition:500ms background-color ease,500ms box-shadow ease,border-color 500ms ease}.traffic-light .light:nth-child(1){background-color:rgb(213 56 90 / .1)}.traffic-light .light:nth-child(2){background-color:rgb(253 200 46 / .1)}.traffic-light .light:nth-child(3){background-color:rgb(87 196 67 / .1)}.traffic-light.red>:nth-child(1){background-color:#d5385a;box-shadow:0 0 12px 6px #d5385a;border-color:#2b2b2b}.traffic-light.redyellow>:nth-child(1){background-color:#d5385a;box-shadow:0 0 12px 6px #d5385a;border-color:#2b2b2b}.traffic-light.redyellow>:nth-child(2){background-color:#fdc82e;box-shadow:0 0 12px 6px #fdc82e;border-color:#2b2b2b}.traffic-light.green>:nth-child(3){background-color:#57c443;box-shadow:0 0 12px 6px #57c443;border-color:#2b2b2b}.traffic-light.greenyellow>:nth-child(2){background-color:#fdc82e;box-shadow:0 0 12px 6px #fdc82e;border-color:#2b2b2b}.traffic-light.greenyellow>:nth-child(3){background-color:#57c443;box-shadow:0 0 12px 6px #57c443;border-color:#2b2b2b}.traffic-light.yellow>:nth-child(2){background-color:#f2c82e;box-shadow:0 0 12px 6px #f2c82e;border-color:#2b2b2b}.traffic-light.none>:nth-child(1){background-color:#fff;box-shadow:0 0 12px 6px #fff;border-color:#fff}.traffic-light.none>:nth-child(2){background-color:#fff;box-shadow:0 0 12px 6px #fff;border-color:#fff}.traffic-light.none>:nth-child(3){background-color:#fff;box-shadow:0 0 12px 6px #fff;border-color:#fff}