*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root{
    --bg-clr:#f0f0f0;
    --transition-standard:0.3s ease;
}

html.dark {
    --bg-clr:#000;
}

body {
    display: grid;
    place-content: center;
    height: 100vh;
    background-color: var(--bg-clr);
    transition: background-color var(--transition-standard);
}
.toggle { 
    --toggle-width: 5.625em;
    --toggle-height: 2.5em;
    --base-scale: 3.8rem;
    --radius-pill:9999em;
    --sun-diameter:2.125em;
    --sun-offset: calc(( var(--toggle-height) - var(--sun-diameter)) / 2 );

    --bg-toggle-light:#3d7eae;
    --shadow-highlight:rgba(255,255,255,0.94);
    --bg-toggle-dark:#1d1f2c;
    --shadow-primary: rgba(0,0,0,0.25);
    --clr-halo: rgba(255,255,255,0.1);
    --clr-sun: #ecca2f;    
    --clr-cloud-back: #aacadf;
    --clr-moon: #c4c9d1;
    --clr-crater:#959db1;
    --clr-cloud-front: #f3fdff;
}
.toggle{
    font-size: var(--base-scale);
    background: none;
    border: none;
}

.toggle__input{
    display: none;
}

.toggle__container {
    width: var(--toggle-width);
    height: var(--toggle-height);
    background-color: var(--bg-toggle-light);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--transition-standard);
    box-shadow: 0.06em 0.06em 0.125em var(--shadow-highlight);
    position: relative;
    overflow: hidden;
}

.toggle__container::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    box-shadow: 0em 0.05em 0.2em rgba(0,0,0,0.5) inset;
    pointer-events: none;
}

html.dark .toggle__container {
    background-color: var(--bg-toggle-dark);
}

.toggle__sun {
    width: var(--sun-diameter);
    height: var(--sun-diameter);
    background-color: var(--clr-sun);
    border-radius: 50%;
    position: absolute;
    top: var(--sun-offset);
    transform: translateX(var(--sun-offset));
    transition: transform var(--transition-standard);
    box-shadow: 
    0.05em 0.125em 0.125em var(--shadow-primary),
    0em 0.05em 0.125em var(--shadow-primary),
    0.05em 0.05em 0.05em 0em rgba(254,255,239,0.61) inset,
    0em -0.05em 0.05em 0em #a1872a inset,
    0 0 0 0.625em var(--clr-halo),
    0 0 0 1.25em var(--clr-halo),
    0 0 0 1.875em var(--clr-halo);
    overflow: hidden;
}

html.dark .toggle__container .toggle__sun {
    transform: translateX(
        calc( var(--toggle-width) - var(--sun-diameter) - var(--sun-offset) )
        );
}

.toggle__moon-mask {
    background-color: var(--clr-moon);
    width:100%;
    height:100%;
    border-radius: 50%;
    transform: translateX(100%);
    transition: transform var(--transition-standard);
    box-shadow:
    0.06em 0.06em 0.06em rgba(254,255,239,0.61) inset,
    0em -0.06em 0.06em 0em #969696 inset,
}

html.dark .toggle__container .toggle__moon-mask {
    transform: translateX(0);
}

.toggle__crater {
    position: absolute;    
    background-color: var(--clr-crater);
    border-radius: 50%;
    box-shadow: 
    0.03em 0.03 0.06em var(--shadow-primary) inset;
}

.toggle__crater:nth-of-type(1) {
    width:0.75em;
    height:0.75em;
    top:0.75em;
    left:0.3em;
}
.toggle__crater:nth-of-type(2) {
    width:0.375em;
    height:0.375em;
    top:0.9em;
    left:1.375em;
}
.toggle__crater:nth-of-type(3) {
    width:0.25em;
    height:0.25em;
    top:0.3em;
    left:0.8em;
}

.toggle__clouds {
    width: 1.25em;
    height: 1.25em;
    background-color: var(--clr-cloud-front);
    border-radius: 50%;
    position: absolute;
    left: 0.3em;
    top:2em;
    box-shadow:
       0.937em 0.312em var(--clr-cloud-front),
       1.437em 0.375em var(--clr-cloud-front),2.187em 0 var(--clr-cloud-front),
       2.937em 0.312em var(--clr-cloud-front),
       3.625em -0.06em var(--clr-cloud-front),
       4.5em -3.12em var(--clr-cloud-front),
       4.625em -1.75em 0 0.437em var(--clr-cloud-front),
       -0.312em -0.312em var(--clr-cloud-back),
       0.5em -0.125em var(--clr-cloud-back),
       1.25em -0.06em var(--clr-cloud-back),
       2.0em -0.312em var(--clr-cloud-back),2.625em 0em var(--clr-cloud-back),
       3.375em -0.437em var(--clr-cloud-back),
       4em -0.625em var(--clr-cloud-back),
       4.125em -2.125em 0 0.437em var(--clr-cloud-back);
    transition: transform var(--transition-standard);
}

html.dark .toggle__container .toggle__clouds {
    transform: translateY(3em);
}

.toggle__stars {
    --clr-star:#fff;
    color: var(--clr-star);
    width:2.75em;

    position: absolute;
    left: 0.3em;
    transform: translateY(-2em);
    transition: transform var(--transition-standard);
}

html.dark .toggle__container .toggle__stars {
    transform: translateY(0.5em);
}

.toggle__container:hover .toggle__sun {
    transform: translateX(calc(var(--sun-offset) + 0.2em));
}

html.dark .toggle__container:hover .toggle__sun {
    transform: translateX(
        calc( var(--toggle-width) - var(--sun-diameter) - var(--sun-offset) - 0.2em )
        );
}