.cb-draw {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-draw__input { display: none; }
.cb-draw__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(30,217,138,.35);
  background: rgba(30,217,138,.05);
  display: flex; align-items: center;
  justify-content: center;
  transition: border-color .3s, background .3s;
}
.cb-draw__input:checked + .cb-draw__box {
  border-color: #1ed98a;
  background: rgba(30,217,138,.12);
}
.cb-draw__svg { width: 14px; height: 10px; }
.cb-draw__path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .35s
    cubic-bezier(.23,1,.32,1) .05s;
}
.cb-draw__input:checked
  + .cb-draw__box .cb-draw__path {
  stroke-dashoffset: 0;
}