.form-checkbox {
  display: flex;
  align-items: center;
  gap: 1em; /* 16px */
  cursor: pointer;
}

.form-checkbox__native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.form-checkbox__box {
  width: 1.5em;  /* 24px */
  height: 1.5em; /* 24px */
  border: 1px solid var(--blue);
  flex-shrink: 0;
  position: relative;
}

.form-checkbox__native:checked + .form-checkbox__box {
  background: var(--blue);
}

.form-checkbox__native:checked + .form-checkbox__box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5L19 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1em no-repeat;
}

.form-checkbox__label {
  color: var(--black);
}