.checkbox {
  height: $form-field-height;
  position: relative;
  display: inline-block;
  margin-right: $spacing-medium;

  .checkbox-label {
    padding-left: calc(#{$spacing-small} * 3);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
  }

  input[type='checkbox'] {
    position: absolute;
    opacity: 0;

    & + label {
      position: absolute;
      display: inline-block;
      padding-left: calc(#{$spacing-small} * 3);
      cursor: pointer;
      min-height: calc(#{$spacing-small} * 2);
      padding-top: 1px;
      padding-bottom: 1px;

      &:before {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 70%;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        content: '';
        padding: $spacing-small;
        border: 1px solid $gray-light;
        border-radius: $corner-radius-small;
        cursor: pointer;
        background-color: white;
      }
    }

    &:checked {
      & + label:before {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABG0lEQVRYR+2WTRLCIAxGm15MpyfRk2kPwsKTxcGRTqQN/QKh3ejSEd7LL9Jw8odO5g9/gcMyME3TjYguIYS7LPshAhE+juMjgpn5KSW6C0h4ilxKdBXYgucS3QRKcCnRRQCBf/thdhewwEMIN1cBKzxmYSWgzeveyq6BrwRK81oSqIX/COzNqybQAl8EkHndEmiFfwSQS/L1GQ8i59KoxW7XMggJ5DvcCw6VQJrHTDDzKz0spcZk5rkUeTq7jCEa1d44ImlXn2MPCTTyVQbSFy0SVvjmJrR0eNYfUM3zEqpvgSUTNZGrJZCGiEQLXC0BKtEKhwS0nvCAwwK5hBfcJJAkiOiKbDhkYZkF0Estv3P9S2YBQ2NYc6H1zBugRu7yV9Lr5wAAAABJRU5ErkJggg==);
      }
    }

    &:focus {
      & + label:before {
        border-color: $color-info;
      }
    }
  }

  input[type='checkbox'][disabled], input[type='checkbox'][disabled] {
    & + label {
      opacity: 0.6;

      &:before {
        background-color: $gray-very-light;
      }
    }
  }
}