:root{--success:#34d399;--size:22px}.morph{--s:var(--size);width:calc(var(--s)*1.4);height:calc(var(--s)*1.4);place-items:center;display:inline-grid}.morph input{display:none}.morph .tile{width:calc(var(--s)*1);height:calc(var(--s)*1);border:2px solid #ffffff1a;border-radius:8px;place-items:center;transition:all .25s cubic-bezier(.2,.9,.3,1);display:grid}.morph .tick{opacity:0;width:16px;height:16px;transition:transform .28s,opacity .2s;transform:scale(.8)}.morph input:checked+.tile{background:linear-gradient(#34d3991f,#34d3990f);border-color:#34d399f2;transform:scale(1.04)}.ripple{pointer-events:none;z-index:0;background:#34d39966;border-radius:50%;animation:.6s linear ripple;position:absolute;transform:scale(0)}@keyframes ripple{to{opacity:0;transform:scale(4)}}.morph .tile{cursor:pointer;background:#fffc;border:2px solid #0000001a;transition:all .25s cubic-bezier(.2,.9,.3,1),box-shadow .2s ease-in-out;position:relative}.morph:hover .tile{border-color:#34d39999;box-shadow:0 0 6px #34d3994d}.morph input:checked+.tile{background:linear-gradient(#34d39926,#34d39914);border-color:#34d399f2;box-shadow:0 0 10px #34d39966}.morph .tick{width:18px;height:18px;stroke:var(--success);opacity:0;transition:transform .25s,opacity .2s;transform:scale(.8)}.morph input:checked+.tile .tick{opacity:1;transform:scale(1)}