:root {
  --checkmark-top: 3px;
  --checkmark-left: 3px;
  --label-margin-top: 1px;
}

.Checkbox {
  display: flex;
}

.Checkbox-checkboxElement {
  position: absolute;
  opacity: 0;
}

.Checkbox-checkboxElement + .Checkbox-label {
  position: relative;
  padding-left: var(--space-5x);
  cursor: pointer;
  align-self: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.Checkbox-checkboxElement + .Checkbox-label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-3x);
  height: var(--space-3x);
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 1px var(--color-neutral-400);
}

.Checkbox-checkboxElement + .Checkbox-label > .Checkbox-colored {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-3x);
  height: var(--space-3x);
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 1px var(--color-neutral-400);
}

.Checkbox-checkboxElement + .Checkbox-label:after {
  content: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='100%25' height='100%25' preserveAspectRatio='xMidYMin meet'%3e%3cg stroke='%2387C627' fill='%2387C627'%3e%3cpath class='d-check' d='M4.32396433,9.37778351 C3.37970535,8.37044034 1.79761921,8.31930049 0.790276044,9.26355947 C-0.217067126,10.2078185 -0.268206967,11.7899046 0.676052011,12.7972478 L9.02441295,21.7033472 L23.2153546,8.31868383 C24.2197823,7.37132415 24.266045,5.78908789 23.3186853,4.78466024 C22.3713256,3.78023259 20.7890894,3.73396986 19.7846617,4.68132954 L9.24230403,14.6247084 L4.32396433,9.37778351 Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  position: absolute;
  top: var(--checkmark-top);
  left: var(--checkmark-left);
  width: 18px;
}

.Checkbox-checkboxElement--checkWhite + .Checkbox-label:after {
    content: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='100%25' height='100%25' preserveAspectRatio='xMidYMin meet'%3e%3cg stroke='white' fill='white'%3e%3cpath class='d-check' d='M4.32396433,9.37778351 C3.37970535,8.37044034 1.79761921,8.31930049 0.790276044,9.26355947 C-0.217067126,10.2078185 -0.268206967,11.7899046 0.676052011,12.7972478 L9.02441295,21.7033472 L23.2153546,8.31868383 C24.2197823,7.37132415 24.266045,5.78908789 23.3186853,4.78466024 C22.3713256,3.78023259 20.7890894,3.73396986 19.7846617,4.68132954 L9.24230403,14.6247084 L4.32396433,9.37778351 Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");

}

.Checkbox-checkboxElement:hover + .Checkbox-label:before {
  box-shadow: 0 0 0 1px var(--color-brand-700);
}

.Checkbox-checkboxElement:not(:checked) + .Checkbox-label:after {
  opacity: 0;
}

.Checkbox-checkboxElement:disabled + .Checkbox-label:before {
  background-color: var(--color-neutral-300);
  box-shadow: none;
  content: '';
  cursor: default;
}

.Checkbox-checkboxElement:disabled:hover + .Checkbox-label:before,
.Checkbox-checkboxElement:disabled:focus + .Checkbox-label:before {
  box-shadow: none;
}

.Checkbox-checkboxElement:disabled + .Checkbox-label:after {
  cursor: default;
}

.Checkbox-checkboxElement:disabled:checked + .Checkbox-label:after {
  content: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='100%25' height='100%25' preserveAspectRatio='xMidYMin meet'%3e%3cg stroke='%23ffffff' fill='%23ffffff'%3e%3cpath class='d-check' d='M4.32396433,9.37778351 C3.37970535,8.37044034 1.79761921,8.31930049 0.790276044,9.26355947 C-0.217067126,10.2078185 -0.268206967,11.7899046 0.676052011,12.7972478 L9.02441295,21.7033472 L23.2153546,8.31868383 C24.2197823,7.37132415 24.266045,5.78908789 23.3186853,4.78466024 C22.3713256,3.78023259 20.7890894,3.73396986 19.7846617,4.68132954 L9.24230403,14.6247084 L4.32396433,9.37778351 Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
}

.Checkbox-checkboxElement:disabled:focus + .Checkbox-label {
  box-shadow: none;
}

/* to have label starting exactly in the middle of checkox*/
.Checkbox-labelText {
  margin-top: var(--label-margin-top);
}

.Checkbox--dark {
  & .Checkbox-checkboxElement:focus + .Checkbox-label:before {
    box-shadow: 0 0 0 2px var(--color-brand-700);
  }

  & .Checkbox-labelText {
    color: var(--color-neutral-text);
  }

  & .Checkbox-sublabelText {
    color: var(--color-neutral-700);
  }
}

.Checkbox--light {
  & .Checkbox-checkboxElement:focus + .Checkbox-label:before {
    box-shadow: 0 0 0 2px var(--color-brand-400);
  }

  & .Checkbox-labelText {
    color: #fff;
  }

  & .Checkbox-sublabelText {
    color: var(--color-neutral-200);
  }

  & .Checkbox-checkboxElement + .Checkbox-label:before {
    box-shadow: none;
  }
}

.Checkbox-sublabelText {
  font-style: italic;
  line-height: 1.4;
  opacity: 0.7;
}