$focusColor: #2D9BE3;

.Checkbox__label {
  display: inline-block;
  font-size: font-size(body);
  font-weight: font-weight();
  color: palette(gray, xx-dark);
  position: relative;
  margin: 0 auto;
  margin-bottom: .66rem;
  text-align: left;
}

.Checkbox__input {
  opacity: 0;
  margin: 0 !important;
  position: absolute;

  &:focus {
    & + .box {
      border-color: $focusColor;
      box-shadow: rgba($focusColor, .4) 0 0 0 2px;
    }
  }
}

.Checkbox__box {
  position: relative;
  height: 18px;
  width: 18px;
  display: inline-block;
  vertical-align: text-bottom;
  cursor: pointer;
  margin-right: .4rem;

  font-size: font-size(body);
  border-radius: 3px;
  border: 1px solid palette(gray, x-dark);;
  color: $white;

  @include pop;

  i {
    display: none;
  }
}

.Checkbox__boxChecked {
  background-color: $blue;
  border-color: $blue;

  i {
    @include center();
    color: $white;
    display: block;
    z-index: 100;
    font-size: font-size(body);
  }
}