.darkify_switch_style.switch-orbit { width: calc(70px * var(--darkify-switch-scale, 1)); height: calc(30px * var(--darkify-switch-scale, 1)); } .darkify_switch_style.switch-orbit .theme-toggle { display: inherit; width: 100%; height: 100%; } .darkify_switch_style.switch-orbit .toggle-track { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; position: relative; } .darkify_switch_style.switch-orbit .theme-toggle svg { width: calc(20px * var(--darkify-switch-scale, 1)); height: calc(20px * var(--darkify-switch-scale, 1)); fill: var(--darkify_switch_light_mode_color); } .darkify_switch_style.switch-orbit .theme-toggle .toggle-sun svg { fill: var(--darkify_switch_dark_mode_color); } .darkify_switch_style.switch-orbit .toggle-sun, .darkify_switch_style.switch-orbit .toggle-moon { display: flex; align-items: center; justify-content: center; z-index: 9; padding: 0 calc(8px * var(--darkify-switch-scale, 1)); border-radius: 50%; } .darkify_switch_style.switch-orbit .toggle-thumb { position: absolute; width: calc(24px * var(--darkify-switch-scale, 1)); height: calc(24px * var(--darkify-switch-scale, 1)); margin: 0 calc(6px * var(--darkify-switch-scale, 1)); background-color: var(--darkify_switch_dark_mode_bg); border-radius: 50%; transition-duration: 0.3s; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .darkify_dark_mode_enabled .darkify_switch_style.switch-orbit .toggle-thumb { background-color: var(--darkify_switch_light_mode_bg); transform: translateX(calc(100% - -13px * var(--darkify-switch-scale, 1))) scale(1); }