:root {
	--switcher-icon-margin: var(--spacing-xs);
	--switcher-width: 40px;
	--switcher-height: 22px;
	--switcher-cicle-size: 14px;
	--switcher-cicle-margin: 4px;
	--switcher-cicle-translateX: 17px;
	--switcher-border-radius: 24px;
	/* circle */
	--wt-switcher-circle-background-color-on: var(--grey-darken-3);
	--wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
	--wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);

	--wt-switcher-circle-background-color-off: var(--grey-lighten-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-lighten-3);
	/* background */
	--wt-switcher-background-color-on: var(--primary-color);
	--wt-switcher-background-color-on-hover: var(--primary-hover-color);
	--wt-switcher-background-color-on-disabled: var(--primary-light-color);

	--wt-switcher-background-color-off: var(--grey-darken-2);
	--wt-switcher-background-color-off-hover: var(--grey-darken-1);
	--wt-switcher-background-color-off-disabled: var(--grey-lighten-4);
}

:root.theme--dark {
	/* circle */
	--wt-switcher-circle-background-color-off: var(--grey-darken-4);
	--wt-switcher-circle-background-color-off-hover: var(--grey-darken-3);
	--wt-switcher-circle-background-color-off-disabled: var(--grey-darken-3);
	/* background */
	--wt-switcher-background-color-off: var(--grey-lighten-1);
	--wt-switcher-background-color-off-hover: var(--grey-lighten-2);
	--wt-switcher-background-color-off-disabled: var(--grey-darken-2);
}