<div class="neumorphism-toggle">
    <input type="checkbox" id="neumorphism" checked>
    <label for="neumorphism">
        <div class="switch">
            <div class="dot"></div>
        </div>
        <span>Neumorphism</span>
    </label>
    <span>... not allowed to toggle again :(</span>
</div>

<!-- twitter -->
<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>

.neumorphism-toggle {
    position: relative;
    transition: transform .3s;
    transform: scale(var(--scale, 1)) translateZ(0);
    &:active {
        --scale: .96;
    }
    input {
        display: none;
        & + label {
            background: #fff;
            border-radius: 9px;
            padding: 16px 0 16px 20px;
            min-width: 208px;
            display: block;
            cursor: pointer;
            position: relative;
            box-shadow: -12px -12px 24px var(--light-shadow, transparent), 12px 12px 24px var(--shadow, transparent);
            transition: box-shadow .4s;
            &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                border-radius: inherit;
                background: linear-gradient(160deg, #F1F4FF, #F9FAFF);
                opacity: var(--gradient, 0);
                transition: opacity .4s;
            }
            .switch {
                position: relative;
                display: inline-block;
                z-index: 1;
                vertical-align: top;
                height: 22px;
                width: 40px;
                border-radius: 11px;
                background: #ECEFFC;
                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    border-radius: inherit;
                    background: linear-gradient(90deg, #4F97FF, #275EFE);
                    opacity: var(--gradient, 0);
                    transition: opacity .4s;
                }
                .dot {
                    background: #D1D6EE;
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    left: -1px;
                    top: -1px;
                    transform: translateX(var(--offset, 0));
                    transition: transform .4s, box-shadow .4s;
                    box-shadow: -4px -4px 8px var(--light-shadow-2, transparent), 4px 4px 8px var(--shadow, transparent);
                    &:before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        border-radius: inherit;
                        background: linear-gradient(160deg, #F1F4FF, #F9FAFF);
                        opacity: var(--gradient, 0);
                        transition: opacity .4s;
                    }
                }
            }
            span {
                line-height: 22px;
                font-size: 16px;
                color: var(--text, #646B8C);
                font-weight: 500;
                display: inline-block;
                vertical-align: top;
                z-index: 1;
                position: relative;
                margin-left: 12px;
                transition: color .4s;
            }
            & + span {
                text-align: center;
                display: block;
                position: absolute;
                left: 0;
                right: 0;
                top: 100%;
                opacity: 0;
                font-size: 12px;
                font-weight: 500;
                color: #A6ACCD;
                transform: translateY(4px);
                transition: opacity .4s, transform .4s;
            }
        }
        &:not(:checked) {
            & + label {
                pointer-events: none;
                & + span {
                    opacity: 1;
                    transform: translateY(12px);
                }
            }
        }
        &:checked {
            & + label {
                --offset: 18px;
                --text: #404660;
                --gradient: 1;
                --shadow: rgba(0, 6, 39, .1);
                --light-shadow: rgba(255, 255, 255, .8);
                --light-shadow-2: rgba(255, 255, 255, .1);
            }
        }
    }
}

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

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

// dribbble & twitter
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', 'Inter UI', Arial;
    background: #F6F8FF;
    .twitter {
        position: fixed;
        display: block;
        right: 16px;
        bottom: 16px;
        svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    }
}