:root {

--toggle-width: 60px;
--toggle-height: 34px;
--toggle-button-size: 26px;
--toggle-transition-duration: var(--transition-duration);

}

.theme-switch-wrapper {

display: flex;
align-items: center;

}

.theme-switch {

display: inline-block;
position: relative;
height: var(--toggle-height);
width: var(--toggle-width);

}

.theme-switch input {

display: none;

}

.slider {

background: var(--background-color-highlight);
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
cursor: pointer;
border-radius: var(--toggle-height);
transition: 0.4s;

}

.slider:before {

content: "";
position: absolute;
left: 4px;
bottom: 4px;
background: var(--background-color);
width: var(--toggle-button-size);;
height: var(--toggle-button-size);
transition: var(--toggle-transition-duration);
border-radius: var(--border-radius-round);

}

input:checked + .slider {

background: var(--background-color-highlight);

}

input:checked + .slider:before {

transform: translateX(calc(1* var(--toggle-button-size)));

}

.slider svg {

color: var(--text-color);
position: absolute;
transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
pointer-events: none;

}

.feather-moon {

opacity: 0;
left: 9px;
bottom: 9px;
transform: translateX(4px);

}

.feather-sun {

opacity: 1;
right: 10px;
bottom: 9px;
transform: translateX(0px);

}

input:checked + .slider .feather-moon {

opacity: 1;
transform: translateX(0);

}

input:checked + .slider .feather-sun {

opacity: 0;
transform: translateX(-4px);

}