.theme_toggle {
    width: var(--theme-toggle-width);
    height: var(--theme-toggle-height);
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.theme_toggle_track {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #f3f3f3;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .08) inset, 0 0 0 1px rgba(255, 255, 255, .05);
    transition: none;
}

.theme_toggle_knob {
    position: absolute;
    top: 50%;
    left: 3px;
    width: var(--theme-toggle-knob-size);
    height: var(--theme-toggle-knob-size);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, .1), -3px -3px 8px rgba(0, 0, 0, .05) inset;
    transform: translate3d(0, -50%, 0);
    transition: none;
    will-change: transform;
}

.theme_toggle_icon_window {
    position: absolute;
    width: 15px;
    height: 15px;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    contain: paint;
}

.theme_toggle_icon {
    position: absolute;
    inset: 0;
    width: 15px;
    height: 15px;
    opacity: 1;
    transition: none;
    will-change: transform, opacity;
}

.theme_toggle_icon_sun { color: #d7a900; opacity: 1; transform: translate3d(0, 0, 0); }
.theme_toggle_icon_moon { color: #f5f5f7; opacity: 0; transform: translate3d(0, 160%, 0); }
html[data-theme="dark"] .theme_toggle_track { background: #1f1f21; box-shadow: 3px 3px 10px rgba(0, 0, 0, .52) inset, 0 0 0 1px rgba(255, 255, 255, .05); }
html[data-theme="dark"] .theme_toggle_knob { background: #2c2c2f; box-shadow: 3px 3px 7px rgba(0, 0, 0, .48), -3px -3px 8px rgba(0, 0, 0, .42) inset; transform: translate3d(calc(var(--theme-toggle-width) - var(--theme-toggle-knob-size) - 6px), -50%, 0); }
html[data-theme="dark"] .theme_toggle_icon_sun { opacity: 0; transform: translate3d(0, 160%, 0); }
html[data-theme="dark"] .theme_toggle_icon_moon { opacity: 1; transform: translate3d(0, 0, 0); }

.theme_toggle[data-theme-transition-phase="exit"][data-theme-transition-direction="to-dark"] .theme_toggle_icon_sun,
.theme_toggle[data-theme-transition-phase="exit"][data-theme-transition-direction="to-light"] .theme_toggle_icon_moon {
    opacity: 0;
    transform: translate3d(0, 160%, 0);
    transition: transform var(--theme-toggle-icon-duration) ease-in, opacity var(--theme-toggle-icon-duration) ease-in;
}

.theme_toggle[data-theme-transition-phase="exit"][data-theme-transition-direction="to-dark"] .theme_toggle_icon_moon,
.theme_toggle[data-theme-transition-phase="move"][data-theme-transition-direction="to-dark"] .theme_toggle_icon_sun,
.theme_toggle[data-theme-transition-phase="move"][data-theme-transition-direction="to-dark"] .theme_toggle_icon_moon,
.theme_toggle[data-theme-transition-phase="enter"][data-theme-transition-direction="to-dark"] .theme_toggle_icon_sun,
.theme_toggle[data-theme-transition-phase="exit"][data-theme-transition-direction="to-light"] .theme_toggle_icon_sun,
.theme_toggle[data-theme-transition-phase="move"][data-theme-transition-direction="to-light"] .theme_toggle_icon_moon,
.theme_toggle[data-theme-transition-phase="move"][data-theme-transition-direction="to-light"] .theme_toggle_icon_sun,
.theme_toggle[data-theme-transition-phase="enter"][data-theme-transition-direction="to-light"] .theme_toggle_icon_moon {
    opacity: 0;
    transform: translate3d(0, 160%, 0);
}

.theme_toggle[data-theme-transition-phase="enter"][data-theme-transition-direction="to-dark"] .theme_toggle_icon_moon,
.theme_toggle[data-theme-transition-phase="enter"][data-theme-transition-direction="to-light"] .theme_toggle_icon_sun {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform var(--theme-toggle-icon-duration) ease-out, opacity var(--theme-toggle-icon-duration) ease-out;
}

.theme_toggle[data-theme-transition-phase="move"] .theme_toggle_track { transition:background-color var(--theme-toggle-knob-duration) linear,box-shadow var(--theme-toggle-knob-duration) linear; }
.theme_toggle[data-theme-transition-phase="move"] .theme_toggle_knob { transition:transform var(--theme-toggle-knob-duration) linear,background-color var(--theme-toggle-knob-duration) linear,box-shadow var(--theme-toggle-knob-duration) linear; }
.theme_toggle:focus { outline:none; }