:root{--dot-size:.5rem;--animation-duration:2s}.flex-container{align-items:center;display:flex;justify-content:center}.flex-container>*{margin:0 .5rem}.dot{background-color:#00f;border-radius:50%;height:var(--dot-size);width:var(--dot-size)}@keyframes blink{0%,to{opacity:0}50%{opacity:1}}.dot--basic{animation:blink 2s infinite}.dot--once{animation:blink 2s 1}.dot--delayed{animation:blink 2s 4s infinite}@keyframes choppyBlink{0%{opacity:0}to{opacity:1}}.dot--choppy{animation:choppyBlink 2s infinite}@keyframes pulse{0%,to{background-color:#0ff;transform:scale(0) translateY(-75%)}33%{background-color:green}50%{background-color:#00f;transform:scale(1.125) translateY(0)}}.dot--pulse{animation:pulse 8s infinite}@media (prefers-reduced-motion:reduce){.dot{animation:none}}.sample-item{--dot-size:.5rem;--offline-color:#999;--offline-text-color:#666;align-items:center;border:2px solid red;border-radius:4px;display:inline-flex;padding:.5rem 1rem}