/**
 * Styles for the WebSocket status indicator component.
 */
#ws-status {
    border-radius: 50%;
    display: inline-block;
    height: 15px;
    margin-left: 10px;
    transition: background-color 0.3s ease;
    vertical-align: middle;
    width: 15px;
}

.status-connected {
    animation: blink 1s infinite;
    background-color: var(--status-connected-color);
}

.status-disconnected {
    background-color: var(--status-disconnected-color);
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}