/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Connection Status Component Styles
 */

/* === CONNECTION STATUS === */
#connection-status {
    position: fixed;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    z-index: var(--z-fixed);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);

#connection-status.connected {
    background-color: rgba(var(--color-success-rgb, 92, 184, 92), 0.2);
    border: 1px solid var(--color-success);

#connection-status.disconnected {
    background-color: rgba(var(--color-failure-rgb, 217, 83, 79), 0.2);
    border: 1px solid var(--color-failure);

#status-indicator {
    font-size: var(--font-size-xl);
    line-height: 1;

#connection-status.connected #status-indicator {
    color: var(--color-success);
    animation: pulse 2s infinite;

#connection-status.disconnected #status-indicator {
    color: var(--color-failure);

}}}}}}