:root {
    --light: #d8dbe0;
    --dark: #28292c;
    --sun: rgb(255, 255, 146);
}

.theme-switch {
    position: relative;
    width: 50px;
}
  
.theme-switch label {
    position: absolute;
    width: 100%;
    height: 24px;
    background-color: var(--light);
    border-radius: 12px;
    cursor: pointer;
}
  
.theme-switch input {
    position: absolute;
    display: none;
}
  
.theme-switch .slider {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    transition: 0.3s;
}
  
.theme-switch input:checked ~ .slider {
    background-color: var(--dark);
}
  
.theme-switch .slider::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--sun);
    transition: 0.3s;
    box-shadow: none;
}

.theme-switch .slider::before:hover {
    width: 14px;
    height: 14px;
}
  
.theme-switch input:checked ~ .slider::before {
    transform: translateX(24px);
    background-color: var(--dark);
    box-shadow: inset 7px -1px 0px 0px var(--light);
}

#menu-item-theme-switch a:hover, #menu-item-theme-switch a:focus {
    cursor: default;
    background-color: rgba(41, 178, 232, 0);
}

#menu-item-theme-switch {
    height: 50px;
}