.grid-switch {
    position: relative;
}

.grid-switch input {
    display: none;
}

.grid-switch .slider {
    position: absolute;
    transition-property: transform, top, left, right, bottom !important;
}

.grid-switch #theme-light:not(:checked)~.left-slider,
.grid-switch #theme-auto:not(:checked)~.top-slider,
.grid-switch #theme-dark:not(:checked)~.right-slider {
    transition-delay: 0s;
}

.grid-switch #theme-light:checked~.left-slider,
.grid-switch #theme-auto:checked~.top-slider,
.grid-switch #theme-dark:checked~.right-slider {
    transition-delay: 0.5s;
}

.grid-switch #theme-light:checked~.left-slider {
    transform: translate(100%, -50%) !important;
}

.grid-switch #theme-auto:checked~.top-slider {
    transform: translate(-50%, 100%) !important;
}

.grid-switch #theme-dark:checked~.right-slider {
    transform: translate(-100%, -50%) !important;
}

.grid-switch .slider {
    transition-duration: 0.5s;
}

.grid-switch .left-slider {
    top: 50%;
    transform: translate(0, -50%) !important;
}

.grid-switch .top-slider {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0) !important;
}

.grid-switch .right-slider {
    right: 0;
    top: 50%;
    transform: translate(0, -50%) !important;
}

.grid-switch .bottom-slider {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) !important;
}