:root {
    /** sunny side **/
    --blue-background: #c2e9f6;
    --blue-border: #72cce3;
    --blue-color: #96dcee;
    --yellow-background: #fffaa8;
    --yellow-border: #f5eb71;
    /** dark side **/
    --indigo-background: #808fc7;
    --indigo-border: #5d6baa;
    --indigo-color: #6b7abb;
    --gray-border: #e8e8ea;
    --gray-dots: #e8e8ea;
    /** general **/
    --white: #fff;
}

.toggle__checkbox {
    display: none;
}

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    position: relative;
}

.toggle__label {
    width: 200px;
    height: 100px;
    background: var(--blue-color);
    border-radius: 100px;
    display: flex;
    position: relative;
    transition: all 350ms ease-in;
}

.toggle__label::before {
    animation-name: reverse;
    animation-duration: 350ms;
    animation-fill-mode: forwards;
    transition: all 350ms ease-in;
    content: "";
    width: 82px;
    height: 82px;
    border: 5px solid var(--yellow-border);
    top: 4px;
    left: 4px;
    position: absolute;
    border-radius: 82px;
    background: var(--yellow-background);
}

@keyframes reverse {
    0% {
        left: 104px;
        width: 82px;
    }
    60% {
        left: 72px;
        width: 112px;
    }
    100% {
        left: 4px;
    }
}

.background {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--blue-background);
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all 250ms ease-in;
}

/* Adding cloud details */

.toggle__label-background {
    width: 10px;
    height: 5px;
    border-radius: 5px;
    position: relative;
    background: var(--white);
    left: 135px;
    width: 10px;
    height: 5px;
    border-radius: 5px;
    position: relative;
    background: var(--white);
    left: 135px;
    top: 45px;
    transition: all 150ms ease-in;
}

.toggle__label-background::before {
    content: "";
    position: absolute;
    top: -5px;
    width: 40px;
    height: 5px;
    border-radius: 5px;
    background: var(--white);
    left: -20px;
    transition: all 500ms ease-in;
}

.toggle__label-background::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 40px;
    height: 5px;
    border-radius: 5px;
    background: var(--white);
    left: -10px;
    transition: all 150ms ease-in;
}

/* Changing styling based on checked class */

.toggle__checkbox:checked ~.background {
    background: var(--indigo-background);
}

.toggle__checkbox:checked + .toggle__label {
    background: var(--indigo-color);
    border-color: var(--indigo-border);
}

/* Change the sun into the moon */

.toggle__checkbox:checked + .toggle__label::before {
    background: var(--white);
    border-color: var(--gray-border);
    animation-name: switch;
    animation-duration: 350ms;
    animation-fill-mode: forwards;
}

/* Sun to Moon animation */

@keyframes switch {
    0% {
        left: 4px;
    }
    60% {
        left: 4px;
        width: 112px;
    }
    100% {
        left: 104px;
        width: 82px;
    }
}

/* Some dimples for the moon */

.toggle__label:after {
    transition-delay: 0ms;
    transition: all 250ms ease-in;
    position: absolute;
    content: "";
    box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
    left: 143px;
    top: 23px;
    width:10px;
    height: 10px;
    background: transparent;
    border-radius: 50%;
    opacity: 0;
}

.toggle__checkbox:checked + .toggle__label:after {
    transition-delay: 350ms;
    opacity: 1;
}

/* Move the cloud and make it a little bit smaller
 * when switching from the sun to the moon
 */

.toggle__checkbox:checked + .toggle__label .toggle__label-background {
    left: 60px;
    width: 5px;
}

.toggle__checkbox:checked + .toggle__label .toggle__label-background:before {
    width: 5px;
    height: 5px;
    top: -25px;
}

.toggle__checkbox:checked + .toggle__label .toggle__label-background:after {
    width: 5px;
    height: 5px;
    left: -30px;
    top: 20px;
}