<label class="star-toggle">
    <input type="checkbox" />
    <div class="icon">
        <div class="star">
            <div class="eye"></div>
        </div>
    </div>
</label>

<label class="star-toggle">
    <input type="checkbox" checked />
    <div class="icon">
        <div class="star">
            <div class="eye"></div>
        </div>
    </div>
</label>

<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

.star-toggle {
    --color-default: #7E7E86;
    --face-color-default: #1A1A20;
    --color-active: #F6C206;
    --face-color-active: #845901;
    --hole: #09090C;
    --hole-inner: #121218;
    --y: 0px;
    --scale: 1;
    --rotate: 0deg;
    --hole-scale: 0;
    --face-scale: 1;
    --face-tear-o: 0;
    --face-tear-y: -6px;
    --face-tear-s: 1;
    --toggle-y: 0px;
    width: 40px;
    height: 40px;
    display: block;
    cursor: pointer;
    transform: translateY(var(--toggle-y)) translateZ(0);
    &:active {
        --icon-s: .95;
    }
    input {
        display: none;
        &:checked {
            & + .icon {
                --color: var(--color-active);
                --face-color: var(--face-color-active);
                --face-radius: 0 0 4px 4px;
            }
        }
    }
    .icon {
        width: 64px;
        height: 140px;
        display: flex;
        pointer-events: none;
        position: relative;
        clip-path: ellipse(150% 50% at 50% 50%);
        margin: -100px 0 0 -12px;
        transform: scale(var(--icon-s, 1)) translateZ(0);
        transform-origin: 50% 108px;
        transition: transform .1s;
        &:before {
            content: '';
            margin-top: auto;
            display: block;
            width: 64px;
            height: 20px;
            background: var(--hole);
            box-shadow: inset 0 6px 0 0 var(--hole-inner);
            border-radius: 100px / 30px;
            transform: scale(var(--hole-scale));
            transform-origin: 50% 100%;
        }
        .star {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 12px;
            bottom: 0;
            transform: translateY(var(--y)) rotate(var(--rotate)) scale(var(--scale));
            border-radius: var(--radius, 0px);
            background: var(--color, var(--color-default));
            clip-path: var(--clip, polygon(50% 0, 65% 32%, 100% 37%, 75% 63%, 80% 100%, 50% 79%, 20% 100%, 25% 63%, 0% 37%, 35% 32%));
            transition: clip-path .2s, border-radius .2s, background .2s;
            &:before,
            &:after,
            .eye {
                content: '';
                position: absolute;
                background: var(--face-color, var(--face-color-default));
                transition: background .2s, box-shadow .2s;
            }
            &:before,
            .eye {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                left: 21px;
                top: 16px;
            }
            &:after {
                width: 10px;
                height: 4px;
                border-radius: var(--face-radius, 4px 4px 0 0);
                left: 15px;
                top: 23px;
                transition: border-radius .2s;
            }
            .eye {
                left: 15px;
                transform: scaleY(var(--face-scale));
                &:before {
                    content: '';
                    position: absolute;
                    left: -1px;
                    top: 5px;
                    width: 2px;
                    height: 2px;
                    border-radius: 50%;
                    background: var(--face-color-default);
                    opacity: var(--face-tear-o);
                    transform: translateY(var(--face-tear-y)) scaleY(var(--face-tear-s));
                }
            }
        }
    }
    &.star-bottom {
        --clip: polygon(50% 0, 65% 32%, 100% 37%, 75% 63%, 83% 96%, 50% 79%, 17% 96%, 25% 63%, 0% 37%, 35% 32%);
    }
    &.star-round {
        --clip: polygon(50% 0%, 100% 0%, 100% 37%, 100% 63%, 100% 100%, 50% 100%, 0% 100%, 0% 63%, 0% 37%, 0% 0%);
        --radius: 50%;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter', Arial;
    justify-content: center;
    align-items: center;
    background: #1A1A20;
    .star-toggle {
        margin: 0 20px;
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
        svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    }
}

document.querySelectorAll('.star-toggle').forEach(toggle => {

    let input = toggle.querySelector('input')

    toggle.addEventListener('click', e => {
        e.preventDefault()

        if(toggle.classList.contains('animated')) {
            return
        }
        toggle.classList.add('animated')

        gsap.to(toggle, {
            keyframes: [{
                '--y': '-48px',
                duration: .3,
                ease: 'power2.out'
            }, {
                '--y': '68px',
                '--scale': .4,
                duration: .325,
                onStart() {
                    toggle.classList.add('star-round')
                }
            }, {
                '--y': '-80px',
                '--scale': 1,
                duration: .45,
                ease: 'power2.out',
                onStart() {
                    input.checked = !input.checked
                    setTimeout(() => toggle.classList.remove('star-round'), 100)
                }
            }, {
                '--y': '0px',
                duration: .45,
                ease: 'power2.in',
                onComplete() {
                    toggle.classList.add('star-bottom')
                    setTimeout(() => toggle.classList.remove('star-bottom'), 200)
                }
            }, {
                '--toggle-y': '3px',
                duration: .2
            }, {
                '--toggle-y': '0px',
                '--face-scale': input.checked ? 1 : .4,
                '--face-tear-o': input.checked ? 1 : 0,
                '--face-tear-y': input.checked ? '0px' : 0,
                '--face-tear-s': input.checked ? 1.5 : 1,
                duration: .125
            }, {
                '--face-scale': 1,
                '--face-tear-o': 0,
                '--face-tear-y': input.checked ? '4px' : 0,
                '--face-tear-s': input.checked ? 2.5 : 1,
                duration: .15
            }],
            clearProps: true,
            onComplete() {
                toggle.classList.remove('animated')
            }
        })

        gsap.to(toggle, {
            keyframes: [{
                '--hole-scale': .8,
                duration: .5,
                ease: 'elastic.out(1, .75)'
            }, {
                '--hole-scale': 0,
                duration: .2,
                delay: .2
            }]
        })

        gsap.to(toggle, {
            '--rotate': '360deg',
            duration: 1.55,
            clearProps: true
        })
    })
})