.traffic-buttons button { display: grid; place-items: center; min-width: 38px; width: 38px; height: 38px; padding: 0; border-color: transparent; background: transparent; font-size: 0; }
.traffic-buttons button::after { content: ''; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px #00000018; }
.traffic-buttons button[data-value="green"]::after { background: #379466; }
.traffic-buttons button[data-value="yellow"]::after { background: #f3c64a; }
.traffic-buttons button[data-value="red"]::after { background: #bf5959; }
.traffic-buttons button.selected { background: #fff !important; border-width: 2px; box-shadow: 0 2px 6px #18302e22; }
.traffic-buttons button[data-value="green"].selected { border-color: #379466; }
.traffic-buttons button[data-value="yellow"].selected { border-color: #d49b20; }
.traffic-buttons button[data-value="red"].selected { border-color: #bf5959; }