/*------------------------------------*\
  #COMPONENTS - CHECKLIST
\*------------------------------------*/
$icon-size: ($spacing-unit * 2.5) !default;
// $icon-size: ($spacing-unit * 4.5) !default;
$icon-spacer: $spacing-unit !default;
$checklist-title-line-height: 1.2 !default;

.c-checklist {
  padding-left: ($icon-size + $icon-spacer);
  // margin-left: $spacing-unit * 2;
  margin-bottom: $spacing-unit;
}

.c-checklist__item {
  @include clearfix();
  margin-bottom: $spacing-unit-large;
}

.c-checklist__title {
  @include font-weight(bold);
  position: relative;
  line-height: $checklist-title-line-height;
  margin-bottom: $spacing-unit;
  margin-top: $icon-size / 3;
  margin-top: calc(#{$icon-size / 2} - #{$checklist-title-line-height / 2 + 0em});
}

.c-checklist__title:before {
  background-image: url('../../images/icons/checkmark.svg');
  background-size: contain; //Prevent icon from rendering slightly outside the available space in Safari due to subpixel rendering.
  width: ceil($icon-size);
  height: ceil($icon-size);
  content: '';
  position: absolute;
  top: 50%;
  font-size: 0;
  line-height: 0;
  display: block;
  // margin-top: -$icon-size / 2;
  // margin-left: -$icon-size - $icon-spacer;
  left: -$icon-spacer;
  transform: translateY(-50%) translateX(-100%);
  // margin-right: $icon-spacer;
  // margin-left: -($icon-size + $icon-spacer + 3px);
  display: inline-block;
  vertical-align: middle;
}

.c-checklist__content {
  // margin-bottom: $spacing-unit;
}