.checkbox {
  $form-font-size: 1.4rem;

  position: relative;

  &__input {
    display: none;
  }

  &__label {
    display: block;
    padding-left: $form-font-size + 1rem;
    cursor: pointer;
    line-height: 0.9;
  }

  [type="radio"] + .checkbox__label:before,
  [type="checkbox"] + .checkbox__label:before {
    display: block;
    width: $form-font-size;
    height: $form-font-size;
    position: absolute;
    left: 2px;
    content: "";
    cursor: pointer;
    box-shadow: inset 0 0 0 1px white;
  }

  [type="radio"]:checked + .checkbox__label:before,
  [type="checkbox"]:checked + .checkbox__label:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }
}