.checkbox{--checkbox-bg: #d5d3d5;--face-color-light: #ffffff;--face-color-dark: #ededed;--face-element-color: #8b8d8b;--face-shadow-color: rgba(0, 0, 0, .3);--easing: cubic-bezier(.78, 0, .22, 1);position:relative;width:120px;height:50px;background-color:var(--checkbox-bg);border-radius:25px;padding:5px;overflow:hidden;display:block;-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:scale(.8);transform:scale(.8)}.checkbox:after,.checkbox:before{content:"NEIN";padding:11px 20px;color:#fff;position:absolute;left:0%;top:0%;width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-justify-content:flex-end;justify-content:flex-end;z-index:0}.checkbox:before{z-index:1;content:"JA";-webkit-justify-content:flex-start;justify-content:flex-start;background:linear-gradient(35deg,#01f7b6,#00c792);opacity:0;transition:.8s ease-in}.checkbox svg{position:relative;z-index:2;width:40px;height:40px;border-radius:50%;overflow:hidden;transition:1s var(--easing);box-shadow:-1px 3px 4px -1px var(--face-shadow-color)}.checkbox svg .sleepy,.checkbox svg .happy{transition:.6s var(--easing) .3s}.checkbox svg .sleepy *,.checkbox svg .happy *{fill:var(--face-element-color)}.checkbox svg .happy{transition:.6s var(--easing);-webkit-transform:translateX(-70px);transform:translate(-70px)}.checkbox svg .happy .mouth,.checkbox svg .happy .eye{-webkit-transform-origin:auto center;transform-origin:auto center;-webkit-transform:scaleY(.9) translateY(3px);transform:scaleY(.9) translateY(3px);transition:.6s cubic-bezier(.46,-3,.25,1) .1s}.checkbox svg .sleepy *{transition:.3s cubic-bezier(1,0,.76,1.05) 1.4s}.checkbox .face{border-radius:50%;overflow:hidden;width:40px;height:40px;fill:url(#face_gradient)}.checkbox.checked svg{-webkit-transform:translateX(70px);transform:translate(70px)}.checkbox.checked svg .sleepy{transition:.6s cubic-bezier(1,0,.76,1.05);-webkit-transform:translate(60px,12px) rotateZ(-10deg) scaleY(.9);transform:translate(60px,12px) rotate(-10deg) scaleY(.9)}.checkbox.checked svg .sleepy *{transition:.3s cubic-bezier(1,0,.76,1.05) .2s}.checkbox.checked svg .happy{transition:.6s var(--easing) .4s;-webkit-transform:translateX(0);transform:translate(0)}.checkbox.checked svg .happy .mouth,.checkbox.checked svg .happy .eye{-webkit-transform:scaleY(1.1) translateY(-3px);transform:scaleY(1.1) translateY(-3px);transition:.4s cubic-bezier(.46,3,.25,1) .5s}.checkbox.checked:before{opacity:1}