<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="checkmark" viewBox="0 0 64 64">
     <path d="M63.003 13.372l-4.258-4.258c-1.33-1.065-3.193-1.065-4.524 0l-31.4 30.87-12.77-12.508c-1.33-1.065-3.193-1.065-4.524 0L.998 31.734c-1.33 1.065-1.33 3.193 0 4.258l19.427 18.894c1.33 1.065 3.193 1.065 4.524 0L63 17.63c1.33-1.064 1.33-2.927 0-4.258z"/>
  </symbol>
</svg>

<section class="stage">
  <div class="checkbox">
    <input class="checkbox__input" type="checkbox" id="eggs" />
    <span class="checkbox__box">
      <svg class="icon icon--blue">
        <use xlink:href="#checkmark" />
      </svg>
    </span>
    <label for="eggs" class="checkbox__label">Eggs</label>
  </div>
  <div class="checkbox">
    <input class="checkbox__input" type="checkbox" id="milk" />
    <span class="checkbox__box">
      <svg class="icon icon--blue">
        <use xlink:href="#checkmark" />
      </svg>
    </span>
    <label for="milk" class="checkbox__label">Milk</label>
  </div>
  <div class="checkbox">
    <input class="checkbox__input" type="checkbox" id="bread" />
    <span class="checkbox__box">
      <svg class="icon icon--blue">
        <use xlink:href="#checkmark" />
      </svg>
    </span>
    <label for="bread" class="checkbox__label">Bread</label>
  </div>
</section>

$size: 4rem;
$padding: 1rem;
$blue: blue;
$white: #fff;
$charcoal: #3b3b3b;
$border-size: 0.5rem;
$border-radius: 0.5rem;
$duration: 250ms;
$easing: ease-in;

html,
body {
  height: 100%;
  display: flex;
  justify-content: center;
}

/* Stage */

.stage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Icon */

.icon {
  width: $size;
  height: $size;
  fill: currentColor;
}

/* Checkbox */

.checkbox {
  display: flex;
  align-items: center;
  position: relative;

  .icon {
    transform: scale(0);
    transition: all $duration $easing;
    pointer-events: none;
  }
  
  + .checkbox {
    margin-top: ($padding * 2);
  }
}

.checkbox__label {
  font-size: $size;
  line-height: 1.2;
  cursor: pointer;
  font-weight: bold;
  color: $charcoal;
  padding-left: ($padding * 2);
  transition: all $duration $easing;
}

.checkbox__box {
  background-color: $white;
  border: $border-size solid $charcoal;
  width: $size + $padding + ($border-size * 2);
  height: $size + $padding + ($border-size * 2);
  padding: ($padding / 2);
  border-radius: $border-radius;
  transition: all $duration $easing;
  pointer-events: none;
}

.checkbox__input {
  opacity: 0;
  position: absolute;
  width: $size + ($padding * 2);
  height: $size + ($padding * 2);
  padding: ($padding / 2);
  cursor: pointer;

  &:checked {
    + .checkbox__box {
      border-color: $blue;

      .icon {
        color: $blue;
        transform: scale(1);
      }
    }
    
    ~ .checkbox__label {
      color: $blue;      
    }
  }
}