/* Wrapper styles */ .switchWrapper { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } /* Switch container */ .switch { display: flex; align-items: center; gap: 10px; } /* Label */ .switchLabel { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; position: relative; user-select: none; } /* Input */ .switchLabel input { display: none; } /* Slider */ .switchSlider { position: relative; width: 40px; height: 20px; background: #ccc; border-radius: 12px; transition: #ccc 0.3s ease; } .switchSlider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Checked styles */ .switchLabel input:checked + .switchSlider { background: #704dff; } .switchLabel input:checked + .switchSlider::after { transform: translateX(20px); } /* Disabled styles */ .switchLabel input:disabled + .switchSlider { background: #e0e0e0; } .switchLabel input:disabled + .switchSlider::after { background: #bdbdbd; } /* Switch text */ .switchText { font-size: 1rem; color: #494b7a; font-weight: 500; } /* Description */ .switchDescription { font-size: 0.875rem; color: #6c737f; margin-top: 4px; }