checkbox.css

input[type="checkbox"] {
  position: relative;
  user-select: none;
  /* todo(vmyshko): probably we need to move those before/after into label, 
    and hide input entirely(visibility: hidden)
    but poka chto pokatit
     */
  height: 28px;
  width: 48px;
  cursor: pointer;
}

input[type="checkbox"]::before {
  content: "";
  display: flex;

  position: absolute;
  width: 48px;
  height: 28px;

  border-radius: 16px;

  background-color: var(--color-primary);
}

input[type="checkbox"][disabled] {
  opacity: 0.5;
}

input[type="checkbox"]::after {
  content: "";
  display: flex;

  position: absolute;
  left: 0;

  width: 24px;
  height: 24px;
  margin: 2px;

  border-radius: 12px;

  background-color: #fff;
  z-index: 1;

  transition: left 100ms ease-in-out;
}

input[type="checkbox"]:checked::after {
  left: 20px;
}

.checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox > span {
  font-size: 12px;
  font-weight: 500;

  margin-right: 8px;

  color: var(--color-text-light-fade-50);

  user-select: none;
}