/* -------------------------------------------------
   Replace checkboxes with icons
   ------------------------------------------------- */

input[type=checkbox] {
  display: none;

  // keep the inherited margins, adjust width if more space is necessary
  + label {
    &:before {
      display: inline-block;
      font-size: 18px;
      width: 1em;
      position: relative;
      top: 1px;

      /* unchecked icon */
      content: "";
      color: $blue;
      background: $blue;
      -webkit-mask: url('../img/square-regular.svg') center center no-repeat;
      mask: url('../img/square-regular.svg') center center no-repeat;
    }

    &:hover:before {
      color: $orange;
    }

  }

  &:checked + label {
    &:before {
      /* checked icon */
      content: "";
      -webkit-mask: url('../img/check-square-regular.svg') center center no-repeat;
      mask: url('../img/check-square-regular.svg') center center no-repeat;
    }

    &:hover:before {
      color: $orange;
    }
  }

  &:disabled + label {
    &:before {
      /* disabled icon */
      content: "";
      -webkit-mask: url('../img/minus-square-regular.svg') center center no-repeat;
      mask: url('../img/minus-square-regular.svg') center center no-repeat;
      color: $grayedout;
      background: $grayedout;
    }

    &:hover:before {
      color: $grayedout;
    }
  }

}