*, *:before, *:after {
  box-sizing: border-box;
}

$md-checkbox-checked-color: var(--color-primary);
$md-checkbox-border-color: var(--input-border-color);
$md-checkbox-size: 20px;
$md-checkbox-padding: 4px;
$md-checkmark-width: 2px;
$md-checkmark-color: #FFF;

.form-field--checkbox {
  position: relative;

  label {
    cursor: pointer;
    &:before, &:after {
      content: "";
      position: absolute;
      left:0;
      top: 0;
    }

    &:before {
      // box
      width: $md-checkbox-size;
      height: $md-checkbox-size;
      background: transparent;
      border: 2px solid $md-checkbox-border-color;
      border-radius: 2px;
      cursor: pointer;
      transition: background .3s;
    }

    &:after {
      // checkmark
    }
  }

  input[type="checkbox"] {
    outline: 0;
    visibility: hidden;
    margin-right: 16px;

    &:checked {

       + label:before{
        background: $md-checkbox-checked-color;
        border:none;
      }
      + label:after {

        $md-checkmark-size: $md-checkbox-size - 2*$md-checkbox-padding;

        transform: rotate(-45deg);

        top: ($md-checkbox-size / 2) - ($md-checkmark-size / 4) - $md-checkbox-size/10;
        left: $md-checkbox-padding;
        width: $md-checkmark-size;
        height: $md-checkmark-size / 2;

        border: $md-checkmark-width solid $md-checkmark-color;
        border-top-style: none;
        border-right-style: none;
      }
    }
  }

}