:root {
  --checkList--icon-size: 22px;
}

.CheckList {
  margin-top: var(--space-3x);
}

.CheckList-list {
  padding: 0;
}

.CheckList-item {
  display: flex;
  align-items: flex-start;

  position: relative;

  &:not(:last-child) {
     margin-bottom: var(--space-2x);
   }
  
  &:before {
     display: block;
     content:'';
     width: var(--checkList--icon-size);
     height: var(--checkList--icon-size);
     min-width: var(--checkList--icon-size);
     min-height: var(--checkList--icon-size);
     margin-right: var(--space-2x);
   }
}

.CheckList-item--ink {
  &:before {
     background-image: 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'%3e%3cg stroke='%238696a2' fill='%238696a2'%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");
  }
}

.CheckList-item--green {
  &:before {
     background-image: 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'%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");
  }
}

.CheckList-item--icon {
  position: absolute;
  left: 0;
}


/* IE hacks... */
.CheckList-text {
  flex: 0 1 auto;
}