.machine-stack-light {
    text-align: left;
    vertical-align: bottom;
    height: 18px;
}

.stack-light {
    display: inline-block;
    vertical-align: bottom;
    margin: auto;
    width: 16px;
    height: 16px;
    filter: brightness(80%);
    opacity: 0.6;
    background: magenta;
    box-shadow: inset 0 0 10px black;
}

.stack-light.on,
.stack-light.blink {
    opacity: 1;
    filter: brightness(100%);
    height: 18px;
}

.stack-light.red {
    background: red;
}
.stack-light.red.on,
.stack-light.red.blink {
    background: radial-gradient(ellipse at center, #ffcacc, red);
    box-shadow: 1px 0px 6px red, -1px 0px 6px red, inset 0 0 1px black;
}

.stack-light.blue {
    background: #0056d1;
}
.stack-light.blue.on,
.stack-light.blue.blink {
    background: radial-gradient(ellipse at center, #ededff, #0056d1);
    box-shadow: 1px 0px 6px #0056d1, -1px 0px 6px #0056d1, inset 0 0 1px black;
}

.stack-light.yellow {
    background: #ffca00;
}
.stack-light.yellow.on,
.stack-light.yellow.blink {
    background: radial-gradient(ellipse at center, white, #ffca00);
    box-shadow: 1px 0px 6px #ffca00, -1px 0px 6px #ffca00, inset 0 0 1px black;
}

.stack-light.green {
    background: green;
}
.stack-light.green.on,
.stack-light.green.blink {
    background: radial-gradient(ellipse at center, #e7ffcc, green);
    box-shadow: 1px 0px 6px green, -1px 0px 6px green, inset 0 0 1px black;
}


.stack-light.blink {
    animation-duration: 400ms;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes blink {
    from {
        filter: brightness(100%);
    }
    to {
        filter: brightness(60%);
        box-shadow: none;
        opacity: 0.8;
    }
}