Variable name	Default value	Description
`--b-toogle`	`#d9d9d9`	Background color for the toggle component in its default state.
`--c-toogle`	`grey`	Color of the toggle knob in its default state.
`--b-toogle-active`	`#e096e0`	Background color for the toggle component when active.
`--c-toogle-active`	`purple`	Color of the toggle knob when active.

CSS Class	Description
`toogle`	Base class for the toggle component. Sets size, background, border-radius, and transition effects.
`toogle.active`	Class for the toggle component when active. Changes the background and knob position.
`toogle.syncing`	Class for the toggle component when it is in a syncing state. Disables pointer events, changes the cursor, and displays a spinner animation overlay.
`toogle.active.syncing`	Class for an active toggle component that is also in a syncing state. Inherits 'toogle.syncing' styles and adjusts the spinner position for the active state.