.cb-sweep {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-sweep__input { display: none; }
.cb-sweep__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: border-color .4s, color .4s;
}
.cb-sweep__input:checked + .cb-sweep__box {
  border-color: transparent; color: #fff;
  background: linear-gradient(90deg,
    #7c6cff, #ff6c8a, #3de8f5, #7c6cff);
  background-size: 200% 100%;
  animation: grad-sweep .6s ease forwards;
}
@keyframes grad-sweep {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}