.container { display: flex; align-items: center; gap: 8px; } .label { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; flex: 1; } .checkbox { position: absolute; opacity: 0; width: 0; height: 0; } /* Custom toggle slider */ .slider { position: relative; width: 36px; height: 20px; background: #dadce0; border-radius: 10px; transition: background-color 0.2s; flex-shrink: 0; } .slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .checkbox:checked + .slider { background: #1a73e8; } .checkbox:checked + .slider::before { transform: translateX(16px); } .checkbox:focus + .slider { box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2); } .text { font-size: 14px; color: #3c4043; line-height: 1.4; } .helpButton { background: transparent; border: none; color: #5f6368; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; flex-shrink: 0; } .helpButton:hover { background: #f1f3f4; color: #1a73e8; } /* Dark mode */ [data-theme="dark"] .slider { background: #5f6368; } [data-theme="dark"] .slider::before { background: #e8eaed; } [data-theme="dark"] .checkbox:checked + .slider { background: #8ab4f8; } [data-theme="dark"] .text { color: #e8eaed; } [data-theme="dark"] .helpButton { color: #9aa0a6; } [data-theme="dark"] .helpButton:hover { background: #3c4043; color: #8ab4f8; }