.checkbox{position:relative}.checkbox>svg{position:absolute;top:-130%;left:-170%;width:110px;pointer-events:none}.checkbox *{box-sizing:border-box}.checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;margin:0}.checkbox input[type=checkbox]:focus{outline:0}.checkbox .cbx{width:24px;height:24px;top:calc(100px - 12px);left:calc(100px - 12px)}.checkbox .cbx input{border:2px solid var(--lightestGrey)}.checkbox .cbx input,.checkbox .cbx label{position:absolute;top:0;left:0;width:24px;height:24px;border-radius:50%}.checkbox .cbx label{background:none;transform:trasnlate3d(0,0,0);pointer-events:none}.checkbox .cbx svg{position:absolute;top:5px;left:4px;z-index:1;pointer-events:none}.checkbox .cbx svg path{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:19;stroke-dashoffset:19;transition:stroke-dashoffset .3s ease;transition-delay:.2s}.checkbox .cbx input:checked+label{animation:splash-12 .6s ease forwards}.checkbox .cbx input:checked+label+svg path{stroke-dashoffset:0}@keyframes splash-12{40%{background:var(--primaryColor);box-shadow:0 -18px 0 -8px var(--primaryColor),16px -8px 0 -8px var(--primaryColor),16px 8px 0 -8px var(--primaryColor),0 18px 0 -8px var(--primaryColor),-16px 8px 0 -8px var(--primaryColor),-16px -8px 0 -8px var(--primaryColor)}to{background:var(--primaryColor);box-shadow:0 -36px 0 -10px transparent,32px -16px 0 -10px transparent,32px 16px 0 -10px transparent,0 36px 0 -10px transparent,-32px 16px 0 -10px transparent,-32px -16px 0 -10px transparent}}