.status-bar { display: flex; background-color: var(--surface); border-top: var(--border-width) solid var(--border); padding: var(--spacing-xs) var(--spacing-sm); min-height: 30px; align-items: center; font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--text); } .status-section { display: flex; align-items: center; margin-right: var(--spacing-lg); } .status-label { font-weight: var(--font-weight-medium); margin-right: var(--spacing-xs); } .status-value { font-weight: var(--font-weight-regular); } .toggle-button { padding: var(--spacing-xs) var(--spacing-sm); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); background-color: var(--background); color: var(--text); font-family: var(--font-family); font-size: var(--font-size-sm); cursor: pointer; transition: background-color var(--transition-normal); } .toggle-button:hover { background-color: var(--hover); } .toggle-button.enabled { background-color: var(--primary); color: var(--background); } .toggle-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Responsive design */ @media (max-width: 768px) { .status-bar { flex-wrap: wrap; gap: var(--spacing-sm); } .status-section { margin-right: 0; } }