.light-dark-toggle{width:54px;height:30px;position:relative;background-color:var(--color-secondary-default);border-radius:15px;cursor:pointer}.light-dark-toggle .switch{position:absolute;background-color:var(--color-input-switch);width:22px;height:22px;border-radius:11px;top:4px;left:4px;transition:left .3s ease}.light-dark-toggle .dark-symbol,.light-dark-toggle .light-symbol{position:absolute;width:22px;height:22px;top:4px;transition:all .3s ease}.light-dark-toggle .dark-symbol svg,.light-dark-toggle .light-symbol svg{width:22px;height:22px;padding:2px}.light-dark-toggle .light-symbol{left:4px;fill:var(--color-secondary-default);opacity:1}.light-dark-toggle .dark-symbol{left:calc(100% - 26px);fill:var(--color-input-switch);opacity:.3}@media (prefers-color-scheme:light){.light-dark-toggle .switch{left:4px}.light-dark-toggle .light-symbol{fill:var(--color-secondary-default);opacity:1}.light-dark-toggle .dark-symbol{fill:var(--color-input-switch);opacity:.3}}@media (prefers-color-scheme:dark){.light-dark-toggle .switch{left:calc(100% - 26px)}.light-dark-toggle .light-symbol{fill:var(--color-input-switch);opacity:.3}.light-dark-toggle .dark-symbol{fill:var(--color-secondary-default);opacity:1}}[data-theme=light] .light-dark-toggle .switch{left:4px}[data-theme=light] .light-dark-toggle .light-symbol{fill:var(--color-secondary-default);opacity:1}[data-theme=light] .light-dark-toggle .dark-symbol{fill:var(--color-input-switch);opacity:.3}[data-theme=dark] .light-dark-toggle .switch{left:calc(100% - 26px)}[data-theme=dark] .light-dark-toggle .light-symbol{fill:var(--color-input-switch);opacity:.3}[data-theme=dark] .light-dark-toggle .dark-symbol{fill:var(--color-secondary-default);opacity:1}