.traffic-light-container {
    display                     : flex                  !important;
    flex-direction              : column;
    background-color            : transparent;
    flex-wrap                   : wrap;
    align-content               : flex-end;
    align-items                 : center;
    justify-content             : space-evenly;
    width                       : 20px                  !important;
}
.light {
    width                       : 16px;
    height                      : 16px;
    border-radius               : 50%;
    box-shadow                  : inset 0 -2px 4px rgba(255,255,255,0.15),
                                  inset 0 2px 4px rgba(0,0,0,0.5);
    transition                  : background-color 0.3s ease-in-out,
                                  box-shadow 0.3s ease-in-out;
}
/* Single light states - color assigned by class */
.light.red {
    background-color            : #883333;
}
.light.yellow {
    background-color            : #886633;
}
.light.green {
    background-color            : #338833;
}
/* Active = lit up and pulsing */
.light.red.active {
    animation                   : glow-red 0.6s infinite alternate ease-in-out;
}
.light.yellow.active {
    animation                   : glow-yellow 0.6s infinite alternate ease-in-out;
}
.light.green.active {
    animation                   : glow-green 0.6s infinite alternate ease-in-out;
}
/* Keyframes - brightness pulse */
/* RED */
@keyframes glow-red {
    0% {
        background-color        : #aa0000;
        box-shadow              : inset 0 -2px 6px rgba(255,50,50,0.3),
                                  inset 0 2px 4px rgba(0,0,0,0.4);
    }
    100% {
        background-color        : #ff4444;
        box-shadow              : inset 0 -4px 8px rgba(255,200,200,0.9),
                                  inset 0 2px 4px rgba(0,0,0,0.1);
    }
}
/* YELLOW */
@keyframes glow-yellow {
    0% {
        background-color        : #aa8800;
        box-shadow              : inset 0 -2px 6px rgba(255,200,50,0.3),
                                  inset 0 2px 4px rgba(0,0,0,0.4);
    }
    100% {
        background-color        : #ffee44;
        box-shadow              : inset 0 -4px 8px rgba(255,255,200,0.9),
                                  inset 0 2px 4px rgba(0,0,0,0.1);
    }
}
/* GREEN */
@keyframes glow-green {
    0% {
        background-color        : #00aa00;
        box-shadow              : inset 0 -2px 6px rgba(50,255,50,0.3),
                                  inset 0 2px 4px rgba(0,0,0,0.4);
    }
    100% {
        background-color        : #44ff44;
        box-shadow              : inset 0 -4px 8px rgba(200,255,200,0.9),
                                  inset 0 2px 4px rgba(0,0,0,0.1);
    }
}